fix mobile

my-blog/static/css/style.css

@@ -138,21 +138,19 @@ a.view-markdown:any-link {
     font-size: 16px;
     width: 20px;
     height: 20px;
-    display: flex;
+    color: var(--ai-color);
-    align-items: center;
+    display: inline-block;
-    justify-content: center;
+    font-family: 'icomoon' !important;
-    overflow: hidden;
+    speak: none;
+    font-style: normal;
+    font-weight: normal;
+    font-variant: normal;
+    text-transform: none;
+    line-height: 1;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
 }
 
-.ai-avatar-small {
-    width: 20px !important;
-    height: 20px !important;
-    border-radius: 50%;
-    vertical-align: middle;
-    object-fit: cover;
-    max-width: 20px;
-    max-height: 20px;
-}
 
 /* Ask AI Panel */
 .ask-ai-panel {
@@ -201,7 +199,8 @@ a.view-markdown:any-link {
 
 @media (max-width: 1000px) {
     .main-content {
-        padding: 24px 0 !important;
+        padding: 20px !important;
+        max-width: 100% !important;
     }
 }
 
@@ -770,21 +769,24 @@ a.view-markdown:any-link {
 }
 
 /* Responsive */
-@media (max-width: 1024px) {
+@media (max-width: 1000px) {
     .article-container {
-        grid-template-columns: 1fr;
+        grid-template-columns: 1fr !important;
-        gap: 24px;
+        gap: 24px !important;
+        max-width: 100% !important;
+        padding: 0px !important;
+        margin: 0 !important;
     }
 }
 
 @media (max-width: 1000px) {
     .main-header {
-        padding: 12px 16px !important;
+        padding: 12px 0 !important;
     }
     
     .header-content {
         max-width: 100% !important;
-        padding: 0 16px !important;
+        padding: 0 20px !important;
         grid-template-columns: 0 1fr auto !important;
     }
     
@@ -797,13 +799,13 @@ a.view-markdown:any-link {
     .logo {
         grid-column: 1 / 3;
         justify-self: center;
-        padding: 10px;
+        padding: 5px;
     }
     
     /* Reduce logo size on mobile */
     .logo .likeButton {
-        width: 50pt !important;
+        width: 40pt !important;
-        height: 50pt !important;
+        height: 40pt !important;
     }
     
     /* Position AI button on the right */
@@ -826,6 +828,7 @@ a.view-markdown:any-link {
     /* Hide AI button text on mobile, show only icon */
     .ask-ai-btn {
         font-size: 0;
+        gap: 0px !important;
     }
     
     .ask-ai-btn .ai-icon {
@@ -836,6 +839,28 @@ a.view-markdown:any-link {
         padding: 16px;
     }
     
+    /* Article content mobile optimization */
+    .article-body {
+        overflow-x: hidden;
+    }
+    
+    .article-body pre {
+        margin: 16px 0 !important;
+        border-radius: 4px !important;
+        max-width: 100% !important;
+        overflow-x: auto !important;
+    }
+    
+    .article-body pre code {
+        padding: 20px 12px !important;
+        word-wrap: break-word;
+        white-space: pre-wrap;
+    }
+    
+    .article-body code {
+        word-break: break-all;
+    }
+    
     .ask-ai-form {
         flex-direction: column;
     }
@@ -853,14 +878,6 @@ a.view-markdown:any-link {
         font-size: 24px;
     }
     
-    .main-content {
-        padding: 16px;
-        max-width: 100%;
-    }
-    
-    .article-container {
-        padding: 0;
-    }
     
     .message-header .avatar {
         width: 32px;

my-blog/templates/base.html

@@ -56,7 +56,7 @@
                 <div class="header-actions">
                     <!-- Ask AI button on all pages -->
                     <button class="ask-ai-btn" onclick="toggleAskAI()" id="askAiButton">
-                        <span class="ai-icon">🤖</span>
+                        <span class="ai-icon icon-ai"></span>
                         ai
                     </button>
                 </div>
@@ -156,11 +156,6 @@
         
         function updateAskAIButton() {
             const button = document.getElementById('askAiButton');
-            const iconSpan = button.querySelector('.ai-icon');
-            
-            if (aiProfileData && aiProfileData.avatar) {
-                iconSpan.innerHTML = `<img src="${aiProfileData.avatar}" alt="${aiProfileData.displayName || 'AI'}" class="ai-avatar-small">`;
-            }
             
             if (aiProfileData && aiProfileData.displayName) {
                 button.childNodes[2].textContent = aiProfileData.displayName;