Changeset dee7f02 in Klonkt for src/views/partials/fedi-tabs.ejs

Timestamp:

06/26/2026 03:03:03 PM (2 months ago)

Author:

Robin Genis <roboburr@…>

Branches:

main

Children:

7ca3ffc

Parents:

474a5ed

Message:

style(fedi): remove the extra tab headroom + reduce wrapper top margin

Reverted the fedi-tabs top margin/mobile safe-area I'd added (the masthead already
clears the iOS notch via its own safe-area padding), and reduced the 5 fediverse page
wrappers' top margin 2rem -> 1rem. Less headroom on desktop/Android/iOS.

File:

• src/views/partials/fedi-tabs.ejs (modified) (2 diffs)

src/views/partials/fedi-tabs.ejs

@@ -19 +19 @@
 <style>
 /* All 5 tabs share the width equally and always fit (truncate with ellipsis if needed). */
-.fedi-tabs { display: flex; margin: 1.25rem 0 1.5rem;
+.fedi-tabs { display: flex; margin: 0 0 1.25rem;
   border-bottom: 1px solid color-mix(in srgb, var(--ink, #000) 10%, transparent); }
 .fedi-tab { flex: 1 1 0; min-width: 0; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
@@ -30 +30 @@
 .fedi-tab-badge { flex: 0 0 auto; min-width: 1.15em; padding: 0 .3em; border-radius: 999px;
   background: var(--accent, #e8b04b); color: #fff; font-size: .66rem; line-height: 1.5; text-align: center; }
-/* Mobile: no extra headroom — only the iOS safe-area inset to clear the notch. */
-@media (max-width: 767px) { .fedi-tabs { margin-top: env(safe-area-inset-top, 0px); } }
 @media (max-width: 520px) { .fedi-tab { padding: .55rem .25rem; font-size: .82rem; } }
 @media (max-width: 380px) { .fedi-tab { font-size: .74rem; } }