responsive tables and post page redesign for narrow viewport

templates/post.html

@@ -2,8 +2,8 @@
 {% block title %}{{ post.title }}{% endblock %}
 {% block content %}
     <div class="max-w-4xl mx-auto">
-        <article class="bg-white rounded-lg shadow-md border border-gray-200">
-            <header class="px-8 pt-8 pb-6 border-b border-gray-100">
+        <article>
+            <header class="pb-4 mb-2 border-b-2 border-gray-100">
                 <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">
@@ -32,7 +32,7 @@
                     </div>
                 </div>
             </header>
-            <div class="px-8 py-8 prose-compact">{{ post.content | safe }}</div>
+            <div class="prose-compact">{{ post.content | safe }}</div>
         </article>
         <div class="mt-8 bg-gradient-to-r from-blue-600 to-indigo-700 rounded-lg shadow-lg text-white p-8 text-center">
             <h3 class="text-2xl font-bold mb-2">Enjoyed this post?</h3>