From ddf6a7f54e01d810b34760c9f97d53cdbc3e4609 Mon Sep 17 00:00:00 2001
From: bflatastic <bombayapirat@gmail.com>
Date: Thu, 13 Mar 2025 22:28:26 +0700
Subject: [PATCH] top center ui bug fix and padding

---
 .../src/components/features/ToolbarTopCenter/index.tsx        | 2 +-
 .../realtime/src/components/features/ToolbarTopLeft/index.tsx | 4 +++-
 frontend/realtime/src/components/ui/TabSelector.tsx           | 4 ++--
 3 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/frontend/realtime/src/components/features/ToolbarTopCenter/index.tsx b/frontend/realtime/src/components/features/ToolbarTopCenter/index.tsx
index 2e00f49c0a..adc2c4cfef 100644
--- a/frontend/realtime/src/components/features/ToolbarTopCenter/index.tsx
+++ b/frontend/realtime/src/components/features/ToolbarTopCenter/index.tsx
@@ -3,7 +3,7 @@ import { SignaledModelButtons } from "~/KonvaRootComponent/SignaledModelButtons"
 
 export const ToolbarTopCenter = () => {
   return (
-    <div className="flex flex-col gap-3">
+    <div className="flex flex-col items-center gap-3">
       {/* Model selection buttons (only shown in dev mode for now) */}
       {import.meta.env.DEV && <SignaledModelButtons />}
 
diff --git a/frontend/realtime/src/components/features/ToolbarTopLeft/index.tsx b/frontend/realtime/src/components/features/ToolbarTopLeft/index.tsx
index 05f00de41d..068dabced0 100644
--- a/frontend/realtime/src/components/features/ToolbarTopLeft/index.tsx
+++ b/frontend/realtime/src/components/features/ToolbarTopLeft/index.tsx
@@ -25,7 +25,9 @@ export const ToolbarTopLeft = () => {
   console.log(appMode.value);
 
   return (
-    <div className={twMerge("z-20 flex h-fit w-fit items-center gap-8 px-4")}>
+    <div
+      className={twMerge("z-20 flex h-fit w-fit items-center gap-8 pl-1 pr-4")}
+    >
       <img
         src="/brand/mira-logo.png"
         alt="logo"
diff --git a/frontend/realtime/src/components/ui/TabSelector.tsx b/frontend/realtime/src/components/ui/TabSelector.tsx
index 6bda0a8ed5..e4b0a5a137 100644
--- a/frontend/realtime/src/components/ui/TabSelector.tsx
+++ b/frontend/realtime/src/components/ui/TabSelector.tsx
@@ -55,7 +55,7 @@ export const TabSelector: React.FC<TabSelectorProps> = ({
       <TabList className="glass relative inline-flex min-w-fit overflow-x-auto rounded-lg p-1 shadow-lg">
         {/* Animated indicator */}
         <div
-          className="absolute top-1 z-10 h-[calc(100%-8px)] rounded-md border-2 border-primary bg-primary/30 transition-all duration-300 ease-in-out"
+          className="absolute top-1 z-10 h-[calc(100%-8px)] rounded-md border-2 border-primary bg-primary/30 transition-all duration-200 ease-in-out"
           style={{
             left: indicatorStyle.left,
             width: indicatorStyle.width,
@@ -68,7 +68,7 @@ export const TabSelector: React.FC<TabSelectorProps> = ({
             ref={(el) => (tabsRef.current[index] = el)}
             className={({ selected }) =>
               twMerge(
-                "relative z-20 mx-0.5 min-w-max rounded-md border-2 border-transparent px-4 py-1 text-center font-semibold transition-all duration-300 ease-in-out",
+                "relative z-20 mx-0.5 min-w-max rounded-md border-2 border-transparent px-4 py-0.5 text-center font-semibold transition-all duration-200 ease-in-out",
                 selected ? "text-white" : "text-gray-300 hover:text-white",
               )
             }