From e0dc190710aa1d84940f66386d163f53b460811f Mon Sep 17 00:00:00 2001 From: koko210Serve Date: Sat, 28 Feb 2026 23:48:23 +0200 Subject: [PATCH] feat: add responsive CSS breakpoints for mobile and tablet support - 1200px: Adjust panel widths to 55/45 - 1024px: Stack panels vertically, logs below main content - 768px: Tab buttons flow into auto-fill grid rows - 480px: Two-column tab grid, reduced padding for small screens --- bot/static/index.html | 34 ++++++++++++++++++++++++++++++++++ 1 file changed, 34 insertions(+) diff --git a/bot/static/index.html b/bot/static/index.html index c82a801..b39aae0 100644 --- a/bot/static/index.html +++ b/bot/static/index.html @@ -596,6 +596,40 @@ background: #9932CC !important; border-color: #9932CC !important; } + + /* Responsive breakpoints */ + @media (max-width: 1200px) { + .panel { width: 55%; padding: 1.5rem; } + .logs { width: 45%; } + } + + @media (max-width: 1024px) { + body { flex-direction: column; } + .panel { width: 100%; padding: 1.5rem; } + .logs { + width: 100%; + height: 300px; + border-left: none; + border-top: 2px solid #333; + } + } + + @media (max-width: 768px) { + .panel { padding: 1rem; } + .tab-buttons { + grid-template-rows: none; + grid-auto-flow: row; + grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); + } + .tab-button { font-size: 0.85rem; padding: 0.4rem 0.6rem; } + } + + @media (max-width: 480px) { + .panel { padding: 0.5rem; } + .tab-buttons { grid-template-columns: 1fr 1fr; } + .tab-button { font-size: 0.8rem; padding: 0.35rem 0.5rem; } + h1 { font-size: 1.2rem; } + }