improve title style

Author: LinuxJava7

src/components/Navigation/Headerbar.astro

@@ -34,32 +34,43 @@ const { pageTitle } = Astro.props;
       justify-content: right;
     }
 
-    .headerbar-title {
+    .titlebox {
       display: none;
       margin: 0;
       font-size: 15px;
       font-weight: 500;
       text-align: center;
       background-color: oklch(from var(--accent-color) 0.98 0.03 h / 90%);
       padding: 4px 16px;
-      border-radius: 18px;
+      border-radius: 100px;
       backdrop-filter: blur(2px);
-      line-height: 119%;
+
+      justify-content: center;
+      align-items: center;
+      height: 44px;
+      box-sizing: border-box;
 
       box-shadow:
         0 0.3rem 0.3rem rgba(0, 0, 0, 0.1),
         0 0 1rem rgba(0, 0, 0, 0.05),
         inset 0 1px 1px rgba(255, 255, 255, 0.5),
         inset 0 0 0.27rem rgba(255, 255, 255, 0.5);
     }
+    .headerbar-title {
+      display: inline-block;
+      margin: 0;
+      line-height: 118%;
+    }
   }
 </style>
 
 <div id="header-bar">
   <div class="leading"></div>
   <div class="centre">
     <TabBarLarge />
-    <p class="headerbar-title">{pageTitle}</p>
+    <div class="titlebox">
+      <p class="headerbar-title">{pageTitle}</p>
+    </div>
   </div>
   <div class="trailing">
     <AccentButton />

src/styles/global.css

@@ -187,7 +187,7 @@ a[href^="http"]:not(:has(.arrow)):not(:has(img)):not(:has(svg)):not(
     display: none;
   }
 
-  .headerbar-title,
+  .titlebox,
   #bottom-bar {
     display: flex !important;
   }