From 2938b5f5feac0c9c42ac449d5554b32f43d9d90f Mon Sep 17 00:00:00 2001 From: Patrick Balsiger Date: Mon, 25 Aug 2025 09:09:17 +0200 Subject: [PATCH] fix: responsive tabs --- public/styles.css | 67 +++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 67 insertions(+) diff --git a/public/styles.css b/public/styles.css index 0bdc6cb..c204cb8 100644 --- a/public/styles.css +++ b/public/styles.css @@ -478,4 +478,71 @@ p { padding: 0.5rem 1rem; font-size: 0.9rem; } + + /* Mobile tab responsiveness */ + .tabs-header { + flex-wrap: wrap; + gap: 0.25rem; + padding-bottom: 0.5rem; + } + + .tab-button { + flex: 1 1 auto; + min-width: 0; + padding: 0.4rem 0.75rem; + font-size: 0.8rem; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + .tabs-container { + padding: 0.25rem; + margin-top: 0.75rem; + } + + .tab-content { + padding: 0.75rem 0; + } + + /* Mobile member card improvements */ + .member-card { + padding: 1rem; + margin-bottom: 0.75rem; + } + + .member-info { + gap: 0.25rem; + } + + .member-name { + font-size: 1.1rem; + } + + .member-ip { + font-size: 0.8rem; + } + + .member-latency { + margin-top: 0.4rem; + font-size: 0.8rem; + } +} + +/* Extra small screens */ +@media (max-width: 480px) { + .tabs-header { + gap: 0.2rem; + } + + .tab-button { + padding: 0.35rem 0.6rem; + font-size: 0.75rem; + border-radius: 6px 6px 0 0; + } + + .tabs-container { + padding: 0.2rem; + margin-top: 0.5rem; + } } \ No newline at end of file