fix: improve table responsiveness and adjust padding in documentation layout

Author: liorcodev

app/assets/css/main.css

@@ -559,23 +559,45 @@ html {
   width: 100%;
   border-collapse: collapse;
   margin: 1.5rem 0;
-  font-size: 0.9rem;
+  font-size: 0.8rem;
+  display: block;
+  overflow-x: auto;
+  white-space: nowrap;
+}
+@media (min-width: 768px) {
+  .prose table {
+    display: table;
+    white-space: normal;
+    font-size: 0.9rem;
+  }
 }
 .prose thead th {
   background: var(--color-brand-50);
   border: 1px solid var(--color-brand-200);
-  padding: 0.7rem 1rem;
+  padding: 0.5rem 0.75rem;
   text-align: left;
   font-weight: 600;
   color: var(--color-primary-darker);
   font-size: 0.78rem;
   text-transform: uppercase;
   letter-spacing: 0.055em;
 }
+@media (min-width: 768px) {
+  .prose thead th {
+    padding: 0.7rem 1rem;
+  }
+}
 .prose tbody td {
   border: 1px solid var(--color-border-light);
-  padding: 0.6rem 1rem;
+  padding: 0.5rem 0.75rem;
   color: var(--color-text-subtle);
+  font-size: 0.85rem;
+}
+@media (min-width: 768px) {
+  .prose tbody td {
+    padding: 0.6rem 1rem;
+    font-size: 0.9rem;
+  }
 }
 .prose tbody tr:hover td {
   background: var(--color-bg);

app/layouts/docs.vue

@@ -1,12 +1,12 @@
 <template>
-  <div class="min-h-screen flex flex-col bg-white">
+  <div class="min-h-screen flex flex-col bg-white overflow-x-hidden">
     <AppNav />
     <div class="flex flex-1 pt-16">
       <!-- Sidebar -->
       <DocsSidebar />
       <!-- Main content -->
-      <main class="flex-1 min-w-0 px-6 py-10 lg:pl-72 lg:pr-60">
-        <div class="max-w-3xl mx-auto">
+      <main class="flex-1 min-w-0 px-4 sm:px-6 py-10 lg:pl-72 lg:pr-60">
+        <div class="max-w-3xl mx-auto overflow-x-hidden">
           <slot />
           <DocsNavigation class="mt-16" />
         </div>