feat: 详情弹框尺寸优化 - 更宽、占满屏幕、支持拖拽缩放

xian_favor/api.py

@@ -1228,11 +1228,24 @@ INDEX_TEMPLATE = '''
         }
         /* 详情弹框样式 */
         .detail-modal-body {
-            max-height: 60vh;
+            max-height: calc(100vh - 150px);
             overflow-y: auto;
-            padding-bottom: 20px;
+            padding: 15px;
+            padding-top: 50px; /* 给导航按钮留空间 */
             position: relative;
         }
+        #detailModal .modal-dialog {
+            max-width: 800px;
+            min-width: 400px;
+            width: 80%;
+            margin: 10px auto;
+            resize: both;
+            overflow: auto;
+        }
+        #detailModal .modal-content {
+            height: calc(100vh - 20px);
+            max-height: calc(100vh - 20px);
+        }
         .detail-nav-buttons {
             position: absolute;
             right: 15px;
@@ -1254,10 +1267,7 @@ INDEX_TEMPLATE = '''
             background: #fff;
             border-top: 1px solid #dee2e6;
             z-index: 10;
-        }
-        /* 解决底部按钮被遮挡的问题 */
-        .modal-dialog-scrollable .modal-body {
-            overflow-y: auto;
+            padding: 10px 15px;
         }
         .star-btn { font-size: 11px; }
         .status-pending { color: #ffc107; }
@@ -1560,7 +1570,7 @@ INDEX_TEMPLATE = '''
 
 <!-- 详情模态框 -->
 <div class="modal fade" id="detailModal" tabindex="-1">
-    <div class="modal-dialog modal-lg modal-dialog-scrollable">
+    <div class="modal-dialog modal-lg">
         <div class="modal-content">
             <div class="modal-header">
                 <h5 class="modal-title"><span id="detailTypeIcon"></span> <span id="detailTitle"></span></h5>