top center ui bug fix and padding

This commit is contained in:
bflatastic committed 2025-03-13 22:28:26 +07:00
1 parent 17c6e549b5
commit ddf6a7f54e
3 files changed
+6 -4

No files matched your search

@@ -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 />}
@@ -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"
@@ -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",
)
}