From 6d033f70fc1ed7e15f614fd4d7d4ceb2389e5b33 Mon Sep 17 00:00:00 2001
From: MAEDA Go <maeda@farend.jp>
Date: Sat, 12 Sep 2026 11:53:00 +0900
Subject: [PATCH] Remove the gaps above and below the selected main menu tab

---
 app/assets/stylesheets/application.css | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
index 4dc4bf572..0b8361652 100644
--- a/app/assets/stylesheets/application.css
+++ b/app/assets/stylesheets/application.css
@@ -214,7 +214,7 @@ body.has-main-menu #header {
   inset-inline-start: 0;
   inset-inline-end: 0;
   margin-inline-end: 0;
-  padding-block: 2px;
+  padding-block: 0;
   padding-inline: 20px;
   inline-size: auto;
   background: var(--oc-indigo-0);
@@ -223,7 +223,7 @@ body.has-main-menu #header {
   margin: 0;
   padding: 0;
   inline-size: 100%;
-  min-block-size: 28px;
+  min-block-size: 32px;
   white-space: nowrap;
   display: flex;
   align-items: center;
@@ -243,11 +243,12 @@ body.has-main-menu #header {
   text-decoration: none;
   font-size: 0.8125rem;
   margin: 0;
-  padding-block: 7px 5px;
+  /* 9px + 16px line-height + 7px = 32px, the same as the `#main-menu ul` height, so the tab fills the bar and touches the content area */
+  padding-block: 9px 7px;
   padding-inline: 11px;
   background-color: transparent;
   font-weight: normal;
-  line-height: 1.2;
+  line-height: 16px;
   transition: background-color 0.18s ease, color 0.18s ease;
 }
 #main-menu li a:hover {
--
2.55.0