responsive stuffs

src/lib/components/image-generation/Response.svelte

@@ -27,7 +27,7 @@
 ];
 </script>
 
-<div class="h-screen flex flex-col relative">
+<div class="lg:h-screen flex flex-col relative">
   <div class="bg-slate-950 overflow-auto flex-1">
     <div class="w-full uppercase text-zinc-400 text-sm font-semibold border-t border-slate-900 flex items-start sticky top-0 bg-slate-950">
       {#each TABS as { label, icon }, idx }

src/lib/components/text-generation/Response.svelte

@@ -30,7 +30,7 @@
 ];
 </script>
 
-<div class="h-screen flex flex-col relative">
+<div class="lg:h-screen flex flex-col relative">
   <div class="w-full jsonResponse relative">
     <div class="bg-slate-950 w-full uppercase px-5 py-4 text-zinc-400 text-sm font-semibold border-b border-slate-900 flex items-center justify-start gap-2">
       <Icon icon="carbon:json" class="w-5 h-5" />

src/routes/+layout.svelte

@@ -3,7 +3,7 @@
 	import '$lib/styles/tailwind.css';
 </script>
 
-<div class="app flex items-start justify-start">
+<div class="app flex items-start justify-start overflow-auto h-screen lg:h-auto lg:overflow-hidden">
 	<Sidebar />
 
 	<slot />

src/routes/image-generation/+page.svelte

@@ -44,7 +44,7 @@
 </script>
 
 <main class="min-h-screen w-full grid grid-cols-2">
-  <div class="p-10 w-full flex flex-col gap-6">
+  <div class="p-6 lg:p-10 w-full flex flex-col gap-6 lg:overflow-auto lg:h-screen">
     <Form form={form} onForm={onchange} />
     <div>
       <button
@@ -56,8 +56,7 @@
       </button>
     </div>
   </div>
-  <div class="border-l border-slate-900 bg-slate-950">
+  <div class="border-t lg:border-t-0 lg:border-l border-slate-900 bg-slate-950">
     <Response loading={loading} res={data} body={bodyRequest} form={form} endpoint={form.model} />
-    response
   </div>
 </main>

src/routes/text-generation/+page.svelte

@@ -37,12 +37,12 @@
   }
 </script>
 
-<main class="min-h-screen w-full grid grid-cols-2">
-  <div class="p-10 w-full flex flex-col gap-6">
+<main class="min-h-screen w-full grid grid-cols-1 lg:grid-cols-2">
+  <div class="p-6 lg:p-10 w-full flex flex-col gap-6 lg:overflow-auto lg:h-screen">
     <Form form={form} onForm={onchange} />
-    <div>
+    <div class="flex justify-end">
       <button
-        class="bg-gradient-to-r from-slate-900/50 to-slate-900 border border-slate-800/40 text-white rounded-lg text-base transition-all duration-200 leading-relaxed outline-none relative py-3 px-6"
+        class="w-full bg-gradient-to-r from-slate-900/50 to-slate-900 border border-slate-800/40 text-white rounded-lg text-base transition-all duration-200 leading-relaxed outline-none relative py-3 px-6"
         disabled={loading}
         on:click={onsubmit}
       >
@@ -50,8 +50,7 @@
       </button>
     </div>
   </div>
-  <div class="border-l border-slate-900 bg-slate-950">
+  <div class="border-t lg:border-t-0 lg:border-l border-slate-900 bg-slate-950">
     <Response loading={loading} res={data} body={bodyRequest} form={form} endpoint={form.model} />
-    response
   </div>
 </main>