Better responsive

Signed-off-by: Hadi <112569860+anotherhadi@users.noreply.github.com>

src/components/DefaultView.svelte

@@ -84,7 +84,7 @@
   </div>
 
   <div class="card bg-base-200 border border-white/5 md:col-span-2">
-    <div class="card-body flex-row items-center gap-6">
+    <div class="card-body flex-col md:flex-row items-center gap-6">
       <div class="flex-1">
         <h2
           class="card-title text-accent font-mono uppercase text-sm tracking-widest"

src/components/Result.svelte

@@ -61,7 +61,7 @@
         </div>
       </div>
 
-      <div class="min-w-0 flex-1">
+      <div class="min-w-0 flex-1 flex flex-col gap-2">
         <div class="flex items-center gap-2">
           <span
             class="text-[10px] font-black uppercase tracking-widest opacity-50 truncate"

src/layouts/Layout.astro

@@ -55,10 +55,11 @@ const myLinks = [
         href="https://ko-fi.com/anotherhadi"
         slot="action"
         target="_blank"
-        class="btn btn-primary"><Coffee class="size-5" /> Support me</a
+        class="btn btn-primary btn-sm md:btn-md"
+        ><Coffee class="size-5" /> Support me</a
       >
     </Navbar>
-    <div class="m-auto max-w-5xl py-10 px-10 animate-fade-in">
+    <div class="m-auto max-w-5xl md:py-10 md:px-10 py-5 px-5 animate-fade-in">
       <slot />
     </div>
   </body>

src/pages/api-docs.astro

@@ -4,7 +4,7 @@ import { Terminal, Settings, Database, Info, Code } from "lucide-svelte";
 ---
 
 <Layout title="API Documentation">
-  <main class="max-w-4xl mx-auto p-6 space-y-12 my-10">
+  <main class="space-y-12">
     <header class="space-y-4 border-b border-white/5 pb-8">
       <h1
         class="text-5xl font-black uppercase tracking-tighter flex items-center gap-4 text-primary"