feat: 时间分布和详细时间点滑块横屏下左右分布

app/hosts/[hostname]/page.tsx

@@ -800,9 +800,10 @@ export default function HostDetail() {
 
         {/* 截图时间线选项卡 */}
         {activeTab === 'screenshots' && (
-          <div>
+          <div className="lg:flex lg:gap-6 items-start">
+            <div className="lg:w-1/3 lg:flex-shrink-0 space-y-8">
               {/* 小时分布滑块（时间分布） */}
-            <div className="mb-8">
+              <div>
                 <div className="flex justify-between items-center mb-4">
                   <h2 className="text-lg font-medium text-gray-900 dark:text-white">时间分布</h2>
                   <button
@@ -837,7 +838,7 @@ export default function HostDetail() {
 
               {/* 详细时间点滑块 */}
               {showDetailTimeline && (
-              <div className="mb-8">
+                <div>
                   <div className="flex justify-between items-center mb-4">
                     <h2 className="text-lg font-medium text-gray-900 dark:text-white">时间点详情</h2>
                     <div className="flex items-center gap-2">
@@ -881,8 +882,10 @@ export default function HostDetail() {
                   )}
                 </div>
               )}
+            </div>
 
             {/* 图片预览区域及控制按钮 */}
+            <div className="lg:flex-1 min-w-0 mt-8 lg:mt-0">
               {selectedRecord && (
                 <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6">
                   {
@@ -1055,6 +1058,7 @@ export default function HostDetail() {
                 </div>
               )}
             </div>
+          </div>
         )}
 
         {/* 星标记录选项卡 */}