From ef4edd427d9732708bd84903537ffc128ec6f16f Mon Sep 17 00:00:00 2001
From: Junwei Zhao <wahyd4@gmail.com>
Date: Wed, 16 Jul 2025 17:18:25 +1000
Subject: [PATCH] Update style

---
 .../links/collection_confirm_delete.html      |  2 +-
 links/templates/links/collection_list.html    |  2 +-
 links/templates/links/link_detail.html        | 26 +++++++--------
 links/templates/links/link_list.html          | 20 ++++++------
 links/templates/links/page_list.html          |  4 +--
 links/templates/links/post_detail.html        | 32 +++++++++----------
 links/templates/links/post_list.html          | 12 +++----
 links/templates/links/public_post.html        | 15 +++++----
 links/templates/links/search.html             |  2 +-
 links/templates/links/tag_detail.html         | 22 ++++++-------
 links/templates/links/tag_list.html           | 12 +++----
 templates/base.html                           |  2 +-
 12 files changed, 75 insertions(+), 76 deletions(-)

diff --git a/links/templates/links/collection_confirm_delete.html b/links/templates/links/collection_confirm_delete.html
index 8e20838..861858b 100644
--- a/links/templates/links/collection_confirm_delete.html
+++ b/links/templates/links/collection_confirm_delete.html
@@ -16,7 +16,7 @@
                     <h3 class="text-lg leading-6 font-medium text-gray-900">
                         {% trans "Delete Collection" %}
                     </h3>
-                    <div class="mt-2">
+                    <div class=.think-panel"mt-2">
                         <p class="text-sm text-gray-500">
                             {% trans "Are you sure you want to delete this collection?" %}
                             <span class="font-medium text-gray-700">{{ object.name }}</span>
diff --git a/links/templates/links/collection_list.html b/links/templates/links/collection_list.html
index 657c648..b7089bb 100644
--- a/links/templates/links/collection_list.html
+++ b/links/templates/links/collection_list.html
@@ -3,7 +3,7 @@
 {% load static %}
 
 {% block content %}
-<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 sm:py-8">
+<div class="max-w-7xl mx-auto px-2 sm:px-6 lg:px-8 py-2 sm:py-8">
     <div class="flex justify-between items-center mb-4 sm:mb-6">
         <h1 class="text-xl sm:text-2xl font-bold text-gray-900">{% trans "Image Collections" %}</h1>
         <a href="{% url 'collection-create' %}"
diff --git a/links/templates/links/link_detail.html b/links/templates/links/link_detail.html
index 4fef08c..a460494 100644
--- a/links/templates/links/link_detail.html
+++ b/links/templates/links/link_detail.html
@@ -3,9 +3,9 @@
 {% load static %}
 
 {% block content %}
-<div class="container mx-auto px-4 py-8">
+<div class="container mx-auto px-2 py-2">
     <div class="bg-white shadow-md rounded-lg overflow-hidden mb-8">
-        <div class="px-4 py-5 sm:px-6 bg-gray-50 border-b border-gray-200 flex items-center justify-between">
+        <div class="px-2 py-5 sm:px-6 bg-gray-50 border-b border-gray-200 flex items-center justify-between">
             <h1 class="text-2xl font-bold text-gray-900 flex items-center">
                 {% trans "Link Details" %}
                 {% if '{' in link.original_url and '}' in link.original_url %}
@@ -23,13 +23,13 @@
                 {% endif %}
             </h1>
             <div class="flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-2">
-                <a href="{% url 'redirect_to_original' link.alias %}" target="_blank" class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded text-sm sm:text-base inline-flex items-center justify-center">
+                <a href="{% url 'redirect_to_original' link.alias %}" target="_blank" class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-2 rounded text-sm sm:text-base inline-flex items-center justify-center">
                     <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
                     </svg>
                     {% trans "Go to link" %}
                 </a>
-                <a href="{% url 'link_update' link.pk %}" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded text-sm sm:text-base inline-flex items-center justify-center">
+                <a href="{% url 'link_update' link.pk %}" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-2 rounded text-sm sm:text-base inline-flex items-center justify-center">
                     <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
                     </svg>
@@ -37,7 +37,7 @@
                 </a>
             </div>
         </div>
-        <div class="px-4 py-5 sm:p-6">
+        <div class="px-2 py-5 sm:p-6">
             <dl class="grid grid-cols-1 gap-x-4 gap-y-8 sm:grid-cols-2">
                 <div class="sm:col-span-1">
                     <dt class="text-sm font-medium text-gray-500">{% trans "Alias" %}</dt>
@@ -92,10 +92,10 @@
 
     {% if link.link_type == 'CUSTOM' %}
     <div class="bg-white shadow-md rounded-lg overflow-hidden mb-8">
-        <div class="px-4 py-5 sm:px-6 bg-gray-50 border-b border-gray-200">
+        <div class="px-2 py-5 sm:px-6 bg-gray-50 border-b border-gray-200">
             <h2 class="text-xl font-bold text-gray-900">{% trans "Custom Content" %}</h2>
         </div>
-        <div class="px-4 py-5 sm:p-6">
+        <div class="px-2 py-5 sm:p-6">
             <div class="prose prose-sm sm:prose lg:prose-lg xl:prose-xl max-w-none">
                 {{ rendered_text|safe }}
             </div>
@@ -104,7 +104,7 @@
     {% endif %}
 
     <div class="bg-white shadow-md rounded-lg overflow-hidden">
-        <div class="px-4 py-5 sm:px-6 bg-gray-50 border-b border-gray-200">
+        <div class="px-2 py-5 sm:px-6 bg-gray-50 border-b border-gray-200">
             <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center space-y-4 sm:space-y-0">
                 <h2 class="text-xl font-bold text-gray-900">{% trans "Click Statistics" %} - {{ period_name }}</h2>
                 <div class="flex flex-wrap gap-2">
@@ -123,7 +123,7 @@
                 </div>
             </div>
         </div>
-        <div class="px-4 py-5 sm:p-6">
+        <div class="px-2 py-5 sm:p-6">
             <div style="height: 400px; position: relative;">
                 <canvas id="clickChart"></canvas>
             </div>
@@ -131,14 +131,14 @@
     </div>
 
     <div class="bg-white shadow-md rounded-lg overflow-hidden mt-8">
-        <div class="px-4 py-5 sm:px-6 bg-gray-50 border-b border-gray-200">
+        <div class="px-2 py-5 sm:px-6 bg-gray-50 border-b border-gray-200">
             <h2 class="text-xl font-bold text-gray-900">{% trans "URL Change History" %}</h2>
         </div>
-        <div class="px-4 py-5 sm:p-6">
+        <div class="px-2 py-5 sm:p-6">
             {% if change_logs %}
                 <ul class="divide-y divide-gray-200">
                 {% for log in change_logs %}
-                    <li class="py-4">
+                    <li class="py-2">
                         <p class="text-sm text-gray-600">
                             {% trans "URL changed at" %} {{ log.changed_at|date:"Y-m-d H:i" }}
                         </p>
@@ -172,7 +172,7 @@
                     if (item.label) {
                         return item.label;
                     }
-                    
+
                     const date = new Date(item.date);
                     if (intervalDays === 1) {
                         // Daily: show "Jan 15"
diff --git a/links/templates/links/link_list.html b/links/templates/links/link_list.html
index e7ef447..fe92113 100644
--- a/links/templates/links/link_list.html
+++ b/links/templates/links/link_list.html
@@ -146,7 +146,7 @@
             {% endfor %}
           </div>
         {% else %}
-          <div class="bg-gray-50 rounded-lg p-4 text-center">
+          <div class="bg-gray-50 rounded-lg p-2 text-center">
             <p class="text-gray-600 text-sm">{% trans "No posts available yet" %}</p>
             <a href="{% url 'post-create' %}" class="inline-block mt-2 text-blue-600 hover:text-blue-800 font-medium text-sm">{% trans "Create your first post" %}</a>
           </div>
@@ -406,13 +406,13 @@
         <tbody class="bg-white divide-y divide-gray-200" id="links-table-body">
           {% for link in links %}
             <tr class="link-row">
-              <td class="px-3 py-2 sm:px-6 sm:py-4 whitespace-nowrap">
+              <td class="px-3 py-2 sm:px-6 sm:py-2 whitespace-nowrap">
                 <input type="checkbox" name="selected_links" value="{{ link.id }}" class="rounded border-gray-300 text-blue-600 shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50">
               </td>
-              <td class="px-3 py-2 sm:px-6 sm:py-4 whitespace-nowrap">
+              <td class="px-3 py-2 sm:px-6 sm:py-2 whitespace-nowrap">
                 <a href="{% url 'redirect_to_original' link.alias %}" target="_blank" class="text-blue-600 hover:text-blue-900">{{ link.alias }}</a>
               </td>
-              <td class="px-3 py-2 sm:px-6 sm:py-4 whitespace-nowrap hidden sm:table-cell">
+              <td class="px-3 py-2 sm:px-6 sm:py-2 whitespace-nowrap hidden sm:table-cell">
                 <span class="inline-flex items-center">
                   {% if '{' in link.original_url and '}' in link.original_url %}
                     <i class="fas fa-magic text-purple-500"></i>
@@ -426,7 +426,7 @@
                   {% endif %}
                 </span>
               </td>
-              <td class="px-3 py-2 sm:px-6 sm:py-4 whitespace-nowrap hidden md:table-cell">
+              <td class="px-3 py-2 sm:px-6 sm:py-2 whitespace-nowrap hidden md:table-cell">
                 <div class="truncate max-w-xs" title="{{ link.original_url }}">
                   <a href="{% url 'redirect_to_original' link.alias %}"
                      class="text-blue-600 hover:text-blue-800 break-all"
@@ -435,8 +435,8 @@
                   </a>
                 </div>
               </td>
-              <td class="px-3 py-2 sm:px-6 sm:py-4 whitespace-nowrap hidden sm:table-cell">{{ link.click_count }}</td>
-              <td class="px-3 py-2 sm:px-6 sm:py-4 whitespace-nowrap text-sm font-medium">
+              <td class="px-3 py-2 sm:px-6 sm:py-2 whitespace-nowrap hidden sm:table-cell">{{ link.click_count }}</td>
+              <td class="px-3 py-2 sm:px-6 sm:py-2 whitespace-nowrap text-sm font-medium">
                   <div class="flex space-x-2">
                       <a href="{% url 'link_detail' link.id %}"
                          class="p-1 text-blue-600 hover:text-blue-800 hover:bg-blue-50 rounded"
@@ -469,13 +469,13 @@
             </tr>
           {% empty %}
             <tr>
-              <td colspan="6" class="px-3 py-2 sm:px-6 sm:py-4 whitespace-nowrap text-center text-gray-500">{% trans "No links available" %}</td>
+              <td colspan="6" class="px-3 py-2 sm:px-6 sm:py-2 whitespace-nowrap text-center text-gray-500">{% trans "No links available" %}</td>
             </tr>
           {% endfor %}
         </tbody>
       </table>
     </div>
-    <div class="px-6 py-4 bg-gray-50 border-t border-gray-200">
+    <div class="px-6 py-2 bg-gray-50 border-t border-gray-200">
       <button type="submit" class="bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded">{% trans "Delete Selected" %}</button>
     </div>
   </form>
@@ -513,7 +513,7 @@
           if (!noResultsRow) {
             const newRow = document.createElement('tr');
             newRow.id = 'no-results-row';
-            newRow.innerHTML = `<td colspan="8" class="px-6 py-4 whitespace-nowrap text-center text-gray-500">{% trans "No matching links found" %}</td>`;
+            newRow.innerHTML = `<td colspan="8" class="px-6 py-2 whitespace-nowrap text-center text-gray-500">{% trans "No matching links found" %}</td>`;
             tbody.appendChild(newRow);
           }
         } else if (noResultsRow) {
diff --git a/links/templates/links/page_list.html b/links/templates/links/page_list.html
index 24d03b6..9642940 100644
--- a/links/templates/links/page_list.html
+++ b/links/templates/links/page_list.html
@@ -3,7 +3,7 @@
 {% load static %}
 
 {% block content %}
-<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+<div class="max-w-7xl mx-auto px-2 sm:px-4 lg:px-4 py-2">
     <div class="flex justify-between items-center mb-6">
         <h1 class="text-2xl font-bold text-gray-900">{% trans "Bookmark Pages" %}</h1>
         <a href="{% url 'page-create' %}" class="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700">
@@ -103,7 +103,7 @@
                 </div>
             </li>
             {% empty %}
-            <li class="px-4 py-4 text-center text-gray-500">
+            <li class="px-4 py-2 text-center text-gray-500">
                 {% trans "No pages found." %}
             </li>
             {% endfor %}
diff --git a/links/templates/links/post_detail.html b/links/templates/links/post_detail.html
index ca2dcfa..d2675b1 100644
--- a/links/templates/links/post_detail.html
+++ b/links/templates/links/post_detail.html
@@ -39,6 +39,7 @@
         border-radius: 0.5rem;
         margin: 1rem 0;
         overflow: hidden;
+        background-color: #fff;
     }
 
     .think-header {
@@ -299,6 +300,9 @@
         color: #374151;
         white-space: nowrap;
     }
+    .main-content {
+        background: #fff;
+    }
 </style>
 {% endblock %}
 
@@ -334,15 +338,13 @@
 
 
 <!-- Main Content - Optimized Layout -->
-<div class="max-w-5xl mx-auto px-4 py-6">
-    <div class="bg-white shadow-lg rounded-xl overflow-hidden">
-        <!-- Header Section - Title with inline action buttons -->
-        <div class="border-b border-gray-200 px-4 py-4">            <!-- Title and Actions - Responsive Layout -->
-            <div class="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-3 mb-3">
-                <h1 class="text-2xl sm:text-3xl font-bold text-gray-900 sm:flex-1">{{ post.title }}</h1>
+<div class="main-content max-w-5xl mx-auto px-2 py-2">
+    <!-- Title and Actions - Responsive Layout -->
+    <div class="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-3 mb-4">
+        <h1 class="text-2xl sm:text-3xl font-bold text-gray-900 sm:flex-1">{{ post.title }}</h1>
 
-                <!-- Action Buttons - Responsive positioning -->
-                <div class="flex items-center space-x-2 sm:flex-shrink-0">
+        <!-- Action Buttons - Responsive positioning -->
+        <div class="flex items-center space-x-2 sm:flex-shrink-0">
                     <button onclick="toggleTTS()"
                             class="inline-flex items-center px-3 py-1.5 text-sm font-medium text-purple-700 hover:text-purple-800 bg-purple-50 hover:bg-purple-100 rounded-md transition duration-150">
                         <svg class="w-4 h-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -380,7 +382,7 @@
             </div>
 
             <!-- Metadata -->
-            <div class="space-y-3">
+            <div class="space-y-3 mb-4">
 
                 {% if post.summary %}
                 <div class="relative pl-3 border-l-4 border-gray-200">
@@ -514,15 +516,11 @@
                     </div>
                 </div>
             </div>
-        </div>
 
-        <!-- Content Section - Reduced padding, wider content -->
-        <div class="px-4 py-4">
-            <article class="prose max-w-none prose-lg">
-                {{ post.content|markdown|safe }}
-            </article>
-        </div>
-    </div>
+    <!-- Content Section - Full width, no containers -->
+    <article class="prose max-w-none prose-lg">
+        {{ post.content|markdown|safe }}
+    </article>
 </div>
 {% endblock %}
 
diff --git a/links/templates/links/post_list.html b/links/templates/links/post_list.html
index b7bb10e..c7a1e45 100644
--- a/links/templates/links/post_list.html
+++ b/links/templates/links/post_list.html
@@ -2,19 +2,19 @@
 {% load i18n %}
 
 {% block content %}
-<div class="w-full px-4 py-4 sm:py-8 sm:px-6 lg:px-8 max-w-7xl mx-auto">
+<div class="w-full px-2 py-2 sm:py-8 sm:px-6 lg:px-8 max-w-7xl mx-auto">
     <!-- Header Section -->
     <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-6">
         <h1 class="text-xl sm:text-2xl font-bold text-gray-900">{% trans "Posts" %}</h1>
-        <a href="{% url 'post-create' %}" 
+        <a href="{% url 'post-create' %}"
            class="w-full sm:w-auto text-center bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 transition duration-150">
             {% trans "Add Post" %}
         </a>
     </div>
 
     <!-- Filter Section -->
-    <div class="bg-white shadow rounded-lg mb-6 p-4">
-        <form method="get" class="flex flex-col gap-4 sm:flex-row sm:items-end">            
+    <div class="bg-white shadow rounded-lg mb-6 p-2">
+        <form method="get" class="flex flex-col gap-4 sm:flex-row sm:items-end">
             <div class="flex-1">
                 <label for="date_from" class="block text-sm font-medium text-gray-700 mb-1">{% trans "From Date" %}</label>
                 <input type="date" name="date_from" id="date_from"
@@ -68,7 +68,7 @@
                         <div class="flex flex-wrap gap-2 mt-2">
                             {% for tag in post.tags.all %}
                             {% with number=forloop.counter %}
-                            <a href="{% url 'tag-detail' tag.slug %}" 
+                            <a href="{% url 'tag-detail' tag.slug %}"
                                class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium transition duration-150 {% if number|divisibleby:10 %}tag-10{% elif number|divisibleby:9 %}tag-9{% elif number|divisibleby:8 %}tag-8{% elif number|divisibleby:7 %}tag-7{% elif number|divisibleby:6 %}tag-6{% elif number|divisibleby:5 %}tag-5{% elif number|divisibleby:4 %}tag-4{% elif number|divisibleby:3 %}tag-3{% elif number|divisibleby:2 %}tag-2{% else %}tag-1{% endif %}">
                                 {{ tag.name }}
                             </a>
@@ -93,7 +93,7 @@
                                     {% trans "Updated" %}: {{ post.updated_at|date:"Y-m-d H:i" }}
                                 </div>
                             </div>
-                            <div class="flex items-center gap-2 mt-3 sm:mt-0">                               
+                            <div class="flex items-center gap-2 mt-3 sm:mt-0">
                                 <a href="{% url 'post-update' post.pk %}" class="inline-flex items-center px-2.5 py-1.5 text-xs font-medium text-green-700 bg-green-50 rounded-md hover:bg-green-100 transition duration-150">
                                     <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
diff --git a/links/templates/links/public_post.html b/links/templates/links/public_post.html
index 55cad19..7167c9a 100644
--- a/links/templates/links/public_post.html
+++ b/links/templates/links/public_post.html
@@ -15,8 +15,9 @@
             border-radius: 0.5rem;
             margin: 1rem 0;
             overflow: hidden;
+            background-color: #fff;
         }
-        
+
         .think-header {
             background-color: #f9fafb;
             padding: 1rem;
@@ -27,28 +28,28 @@
             font-size: 1rem;
             color: #374151;
         }
-        
+
         .think-header:hover {
             background-color: #f3f4f6;
         }
-        
+
         .think-content {
             padding: 0;
             max-height: 0;
             overflow: hidden;
             transition: max-height 0.3s ease-out, padding 0.3s ease-out;
         }
-        
+
         .think-content.expanded {
             padding: 1rem;
             max-height: 2000px; /* Adjust based on your needs */
             transition: max-height 0.5s ease-in, padding 0.3s ease-in;
         }
-        
+
         .think-icon {
             transition: transform 0.3s ease;
         }
-        
+
         .think-icon.expanded {
             transform: rotate(180deg);
         }
@@ -91,7 +92,7 @@
                     const panel = this.parentElement;
                     const content = panel.querySelector('.think-content');
                     const icon = panel.querySelector('.think-icon');
-                    
+
                     content.classList.toggle('expanded');
                     icon.classList.toggle('expanded');
                 });
diff --git a/links/templates/links/search.html b/links/templates/links/search.html
index 41ef6da..ec5861b 100644
--- a/links/templates/links/search.html
+++ b/links/templates/links/search.html
@@ -85,7 +85,7 @@
                 <ul class="divide-y divide-gray-200">
                     {% for result in results %}
                         <li class="hover:bg-gray-50 transition-colors duration-150">
-                            <div class="px-4 py-4 sm:px-6">
+                            <div class="px-2 py-2 sm:px-6">
                                 <div class="flex items-center justify-between">
                                     <div class="flex-1 min-w-0">
                                         <!-- Show different content based on model type -->
diff --git a/links/templates/links/tag_detail.html b/links/templates/links/tag_detail.html
index 9d95e72..5adee81 100644
--- a/links/templates/links/tag_detail.html
+++ b/links/templates/links/tag_detail.html
@@ -2,7 +2,7 @@
 {% load i18n %}
 
 {% block content %}
-<div class="container mx-auto px-4 py-8">
+<div class="container mx-auto px-2 py-8">
     <div class="bg-white shadow-lg rounded-lg overflow-hidden">
         <!-- Tag Header -->
         <div class="bg-gradient-to-r from-blue-500 to-indigo-600 p-6 text-white">
@@ -17,10 +17,10 @@
                     </div>
                 </div>
                 <div class="flex space-x-2">
-                    <a href="{% url 'tag-update' tag.slug %}" class="bg-white text-blue-600 hover:bg-blue-50 font-medium py-2 px-4 rounded-lg transition duration-150 ease-in-out">
+                    <a href="{% url 'tag-update' tag.slug %}" class="bg-white text-blue-600 hover:bg-blue-50 font-medium py-2 px-2 rounded-lg transition duration-150 ease-in-out">
                         {% trans "Edit" %}
                     </a>
-                    <a href="{% url 'tag-delete' tag.slug %}" class="bg-red-500 hover:bg-red-600 text-white font-medium py-2 px-4 rounded-lg transition duration-150 ease-in-out">
+                    <a href="{% url 'tag-delete' tag.slug %}" class="bg-red-500 hover:bg-red-600 text-white font-medium py-2 px-2 rounded-lg transition duration-150 ease-in-out">
                         {% trans "Delete" %}
                     </a>
                 </div>
@@ -30,16 +30,16 @@
         <!-- Resource Tabs -->
         <div class="border-b border-gray-200">
             <nav class="flex -mb-px overflow-x-auto" aria-label="Tabs">
-                <button class="resource-tab text-blue-600 border-blue-500 whitespace-nowrap py-4 px-6 border-b-2 font-medium text-sm" data-target="links-section">
+                <button class="resource-tab text-blue-600 border-blue-500 whitespace-nowrap py-2 px-6 border-b-2 font-medium text-sm" data-target="links-section">
                     {% trans "Links" %} ({{ links|length }})
                 </button>
-                <button class="resource-tab text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-4 px-6 border-b-2 border-transparent font-medium text-sm" data-target="posts-section">
+                <button class="resource-tab text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-2 px-6 border-b-2 border-transparent font-medium text-sm" data-target="posts-section">
                     {% trans "Posts" %} ({{ posts|length }})
                 </button>
-                <button class="resource-tab text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-4 px-6 border-b-2 border-transparent font-medium text-sm" data-target="pages-section">
+                <button class="resource-tab text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-2 px-6 border-b-2 border-transparent font-medium text-sm" data-target="pages-section">
                     {% trans "Pages" %} ({{ pages|length }})
                 </button>
-                <button class="resource-tab text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-4 px-6 border-b-2 border-transparent font-medium text-sm" data-target="collections-section">
+                <button class="resource-tab text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-2 px-6 border-b-2 border-transparent font-medium text-sm" data-target="collections-section">
                     {% trans "Image Collections" %} ({{ image_collections|length }})
                 </button>
             </nav>
@@ -191,24 +191,24 @@
     document.addEventListener('DOMContentLoaded', function() {
         const tabs = document.querySelectorAll('.resource-tab');
         const sections = document.querySelectorAll('.resource-section');
-        
+
         tabs.forEach(tab => {
             tab.addEventListener('click', function() {
                 // Hide all sections
                 sections.forEach(section => {
                     section.classList.add('hidden');
                 });
-                
+
                 // Show the selected section
                 const targetId = this.getAttribute('data-target');
                 document.getElementById(targetId).classList.remove('hidden');
-                
+
                 // Update tab styles
                 tabs.forEach(t => {
                     t.classList.remove('text-blue-600', 'border-blue-500');
                     t.classList.add('text-gray-500', 'border-transparent');
                 });
-                
+
                 this.classList.remove('text-gray-500', 'border-transparent');
                 this.classList.add('text-blue-600', 'border-blue-500');
             });
diff --git a/links/templates/links/tag_list.html b/links/templates/links/tag_list.html
index ba51d19..c7e26a6 100644
--- a/links/templates/links/tag_list.html
+++ b/links/templates/links/tag_list.html
@@ -37,7 +37,7 @@
         {% for tag in tags %}
         <a href="{% url 'tag-detail' tag.slug %}" class="block group">
             <div
-                class="tag-card rounded-lg p-4 h-full flex flex-col items-center justify-center text-center shadow-md hover:shadow-lg transition-all duration-200">
+                class="tag-card rounded-lg p-2 h-full flex flex-col items-center justify-center text-center shadow-md hover:shadow-lg transition-all duration-200">
                 <div class="mb-2">
                     {% with icon_classes="w-8 h-8 mx-auto" %}
                     {% if forloop.counter|divisibleby:5 %}
@@ -129,7 +129,7 @@
         // Initialize ECharts instance
         const chartDom = document.getElementById('tag-cloud-container');
         const myChart = echarts.init(chartDom);
-        
+
         // Prepare data for word cloud
         const tagCloudData = [];
         {% for tag in tag_cloud %}
@@ -139,7 +139,7 @@
             slug: '{{ tag.slug }}'
         });
         {% endfor %}
-        
+
         // Configure word cloud options
         const option = {
             series: [{
@@ -174,10 +174,10 @@
                 data: tagCloudData
             }]
         };
-        
+
         // Set configuration and render chart
         myChart.setOption(option);
-        
+
         // Add click event to navigate to tag detail page
         myChart.on('click', function(params) {
             const clickedTag = tagCloudData.find(tag => tag.name === params.name);
@@ -185,7 +185,7 @@
                 window.location.href = `/ui/tags/${clickedTag.slug}/`;
             }
         });
-        
+
         // Make chart responsive
         window.addEventListener('resize', function() {
             myChart.resize();
diff --git a/templates/base.html b/templates/base.html
index 8c79bcb..a6449db 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -217,7 +217,7 @@
         </div>
     </nav>
 
-    <div class="container mx-auto mt-20 p-4">
+    <div class="container mx-auto mt-20 p-2">
         {% if messages %}
             {% for message in messages %}
                 <div class="bg-{{ message.tags }}-100 bg-yellow-100 border border-{{ message.tags }}-400 text-{{ message.tags }}-700 border-yellow-500 text-yellow-700 px-4 py-3 rounded relative mb-4" role="alert">