table wrapping

src/domain/post.rs

@@ -17,7 +17,11 @@ impl PostEntry {
 
     pub fn to_html(self) -> Result<Self, anyhow::Error> {
         match markdown::to_html_with_options(&self.content, &markdown::Options::gfm()) {
-            Ok(content) => Ok(Self { content, ..self }),
+            Ok(mut content) => {
+                content = content.replace("<table>", r#"<div class="table-wrapper"><table>"#);
+                content = content.replace("</table>", r#"</table></div>"#);
+                Ok(Self { content, ..self })
+            }
             Err(e) => anyhow::bail!(e),
         }
     }

templates/base.html

@@ -46,7 +46,7 @@
           <div class="flex items-center space-x-4">
             <a href="/admin/dashboard"
                hx-boost="true"
-               class="bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800 text-white px-4 py-2 rounded-lg text-sm font-medium transition-all duration-200 shadow-md hover:shadow-lg transform hover:scale-105">
+               class="hidden md:flex bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800 text-white px-4 py-2 rounded-lg text-sm font-medium transition-all duration-200 shadow-md hover:shadow-lg transform hover:scale-105">
               dashboard
             </a>
             <button class="md:hidden p-2 text-gray-700 hover:text-blue-600 hover:bg-blue-50 rounded-lg transition-colors duration-200"
@@ -68,6 +68,11 @@
                class="text-gray-700 hover:text-blue-600 hover:bg-blue-50 px-4 py-2 rounded-lg text-sm font-medium transition-colors duration-200">
               posts
             </a>
+            <a href="/admin/dashboard"
+               hx-boost="true"
+               class="text-gray-700 hover:text-blue-600 hover:bg-blue-50 px-4 py-2 rounded-lg text-sm font-medium transition-colors duration-200">
+              dashboard
+            </a>
           </nav>
         </div>
       </div>

templates/input.css

@@ -1,8 +1,3 @@
-@import "tailwindcss";
-@plugin "@tailwindcss/typography";
-@import "tailwindcss";
-@plugin "@tailwindcss/typography";
-
 @import "tailwindcss";
 @plugin "@tailwindcss/typography";
 
@@ -92,13 +87,25 @@
   .prose-compact table {
     border-collapse: collapse;
     border-spacing: 0;
-    width: 100%;
     @apply my-6;
     font-size: 14px;
     line-height: 1.45;
+    display: block;
+    overflow-x: auto;
+    width: 100%;
+    min-width: 100%;
+    max-width: 100%;
+  }
+
+  .prose-compact table thead,
+  .prose-compact table tbody {
+    display: table;
+    width: 100%;
+    table-layout: fixed;
   }
 
   .prose-compact table tr {
+    display: table-row;
     background-color: #fff;
     border-top: 1px solid #c6cbd1;
   }
@@ -109,8 +116,13 @@
 
   .prose-compact table th,
   .prose-compact table td {
+    display: table-cell;
     padding: 6px 13px;
     border: 1px solid #dfe2e5;
+    white-space: normal;
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+    min-width: 0;
   }
 
   .prose-compact table th {

templates/post.html

@@ -3,7 +3,7 @@
 {% block content %}
     <div class="max-w-4xl mx-auto">
         <article>
-            <header class="pb-4 mb-2 border-b-2 border-gray-100">
+            <header class="pb-4 mb-2 border-b-2 border-gray-300 border-dashed">
                 <h1 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4 leading-tight">{{ post.title }}</h1>
                 <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between text-sm text-gray-600">
                     <div class="flex items-center space-x-4">