Fix code block file path display for mobile

- Move file path from right-top overlay to top header bar
- Use block display instead of absolute positioning
- Add dedicated styling for filename header bar
- Adjust code padding when filename is present
- Optimize mobile responsiveness to prevent overlap

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

my-blog/static/css/style.css

@@ -517,25 +517,21 @@ a.view-markdown:any-link {
     margin: 16px 0;
     font-size: 14px;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
-    position: relative;
 }
 
-/* File name display for code blocks */
+/* File name display for code blocks - top bar style */
 .article-body pre[data-filename]::before {
     content: attr(data-filename);
-    position: absolute;
-    top: 0;
-    right: 0;
+    display: block;
     background: #2D2D30;
-    color: #CCCCCC;
-    padding: 4px 12px;
+    color: #AE81FF;
+    padding: 8px 16px;
     font-size: 12px;
     font-family: 'SF Mono', 'Monaco', 'Cascadia Code', 'Roboto Mono', monospace;
-    border-bottom-left-radius: 4px;
-    border: 1px solid #3E3D32;
-    border-top: none;
-    border-right: none;
-    z-index: 1;
+    border-bottom: 1px solid #3E3D32;
+    margin: 0;
+    width: 100%;
+    box-sizing: border-box;
 }
 
 .article-body pre code {
@@ -548,6 +544,11 @@ a.view-markdown:any-link {
     line-height: 1.4;
 }
 
+/* Adjust padding when filename is present */
+.article-body pre[data-filename] code {
+    padding: 16px;
+}
+
 /* Inline code (not in pre blocks) */
 .article-body code {
     background: var(--light-white);
@@ -853,6 +854,16 @@ a.view-markdown:any-link {
         white-space: pre-wrap;
     }
     
+    /* Mobile filename display */
+    .article-body pre[data-filename]::before {
+        padding: 6px 12px;
+        font-size: 11px;
+    }
+    
+    .article-body pre[data-filename] code {
+        padding: 12px;
+    }
+    
     .article-body code {
         word-break: break-all;
     }