style: center floating behavior indicators horizontally

fyalavuz · fyalavuz · commit ef1849f2060b · 2026-03-01T23:34:02.000+03:00
diff --git a/apps/examples/app/content-only/page.tsx b/apps/examples/app/content-only/page.tsx
@@ -160,7 +160,7 @@ export default function ContentOnlyPage() {
             </div>
 
             {/* Floating variant indicator */}
-            <div className="fixed bottom-4 left-4 z-50 flex items-center gap-1.5 rounded-full bg-black/70 backdrop-blur-sm px-3 py-1.5 text-[11px] font-mono text-white/80 shadow-lg">
+            <div className="fixed bottom-4 left-1/2 -translate-x-1/2 z-50 flex items-center gap-1.5 rounded-full bg-black/70 backdrop-blur-sm px-3 py-1.5 text-[11px] font-mono text-white/80 shadow-lg">
               <span className="size-1.5 rounded-full bg-emerald-400 animate-pulse" />
               content-only &middot; no header, no footer
             </div>
diff --git a/apps/examples/app/desktop-nav/page.tsx b/apps/examples/app/desktop-nav/page.tsx
@@ -302,7 +302,7 @@ export default function DesktopNavPage() {
         <Content className="pb-16">
           <div className="mx-auto max-w-6xl px-4 sm:px-6">
             {/* Floating variant indicator */}
-            <div className="fixed bottom-4 left-4 z-50 flex items-center gap-1.5 rounded-full bg-black/70 backdrop-blur-sm px-3 py-1.5 text-[11px] font-mono text-white/80 shadow-lg">
+            <div className="fixed bottom-4 left-1/2 -translate-x-1/2 z-50 flex items-center gap-1.5 rounded-full bg-black/70 backdrop-blur-sm px-3 py-1.5 text-[11px] font-mono text-white/80 shadow-lg">
               <span className="size-1.5 rounded-full bg-emerald-400 animate-pulse" />
               HeaderNav
             </div>
diff --git a/apps/examples/app/fixed-header/page.tsx b/apps/examples/app/fixed-header/page.tsx
@@ -224,7 +224,7 @@ export default function FixedHeaderPage() {
         </Content>
 
         {/* Floating variant indicator */}
-        <div className="fixed bottom-4 left-4 z-50 flex items-center gap-2 rounded-full bg-zinc-950/90 px-4 py-2 text-[11px] font-mono text-white/90 shadow-2xl backdrop-blur-md border border-white/10">
+        <div className="fixed bottom-4 left-1/2 -translate-x-1/2 z-50 flex items-center gap-2 rounded-full bg-zinc-950/90 px-4 py-2 text-[11px] font-mono text-white/90 shadow-2xl backdrop-blur-md border border-white/10">
           <span className="size-2 rounded-full bg-emerald-400 animate-pulse" />
           HEADER: behavior=&quot;fixed&quot;
         </div>
diff --git a/apps/examples/app/floating-footer/page.tsx b/apps/examples/app/floating-footer/page.tsx
@@ -269,7 +269,7 @@ export default function FloatingFooterPage() {
       </AppShell>
 
       {/* Floating variant indicator */}
-      <div className="fixed bottom-20 left-4 z-50 flex items-center gap-1.5 rounded-full bg-black/70 backdrop-blur-sm px-3 py-1.5 text-[11px] font-mono text-white/80 shadow-lg">
+      <div className="fixed bottom-20 left-1/2 -translate-x-1/2 z-50 flex items-center gap-1.5 rounded-full bg-black/70 backdrop-blur-sm px-3 py-1.5 text-[11px] font-mono text-white/80 shadow-lg">
         <span className="size-1.5 rounded-full bg-emerald-400 animate-pulse" />
         variant=&quot;floating&quot; position=&quot;center&quot;
       </div>
diff --git a/apps/examples/app/footer-only/page.tsx b/apps/examples/app/footer-only/page.tsx
@@ -211,7 +211,7 @@ export default function FooterOnlyPage() {
         </Footer>
 
         {/* Floating variant indicator */}
-        <div className="fixed bottom-20 left-4 z-50 flex items-center gap-1.5 rounded-full bg-black/70 backdrop-blur-sm px-3 py-1.5 text-[11px] font-mono text-white/80 shadow-lg">
+        <div className="fixed bottom-20 left-1/2 -translate-x-1/2 z-50 flex items-center gap-1.5 rounded-full bg-black/70 backdrop-blur-sm px-3 py-1.5 text-[11px] font-mono text-white/80 shadow-lg">
           <span className="size-1.5 rounded-full bg-emerald-400 animate-pulse" />
           footer-only &middot; no header
         </div>
diff --git a/apps/examples/app/header-only/page.tsx b/apps/examples/app/header-only/page.tsx
@@ -254,7 +254,7 @@ export default function HeaderOnlyPage() {
         </Content>
 
         {/* Floating variant indicator */}
-        <div className="fixed bottom-4 left-4 z-50 flex items-center gap-1.5 rounded-full bg-black/70 backdrop-blur-sm px-3 py-1.5 text-[11px] font-mono text-white/80 shadow-lg">
+        <div className="fixed bottom-4 left-1/2 -translate-x-1/2 z-50 flex items-center gap-1.5 rounded-full bg-black/70 backdrop-blur-sm px-3 py-1.5 text-[11px] font-mono text-white/80 shadow-lg">
           <span className="size-1.5 rounded-full bg-emerald-400 animate-pulse" />
           header-only &middot; no footer
         </div>
diff --git a/apps/examples/app/mini-footer/page.tsx b/apps/examples/app/mini-footer/page.tsx
@@ -185,7 +185,7 @@ export default function MiniFooterPage() {
         </Footer>
 
         {/* Variant indicator pill */}
-        <div className="fixed bottom-20 left-4 z-50 flex items-center gap-1.5 rounded-full bg-black/70 backdrop-blur-sm px-3 py-1.5 text-[11px] font-mono text-white/80 shadow-lg">
+        <div className="fixed bottom-20 left-1/2 -translate-x-1/2 z-50 flex items-center gap-1.5 rounded-full bg-black/70 backdrop-blur-sm px-3 py-1.5 text-[11px] font-mono text-white/80 shadow-lg">
           <span className="size-1.5 rounded-full bg-emerald-400 animate-pulse" />
           variant=&quot;mini&quot;
         </div>
diff --git a/apps/examples/app/responsive/page.tsx b/apps/examples/app/responsive/page.tsx
@@ -202,7 +202,7 @@ export default function ResponsivePage() {
         <Content className="pb-20 md:pb-8">
           <div className="mx-auto max-w-6xl px-4 sm:px-6 pt-6">
             {/* Floating variant indicator */}
-            <div className="fixed bottom-4 left-4 z-50 flex items-center gap-1.5 rounded-full bg-black/70 backdrop-blur-sm px-3 py-1.5 text-[11px] font-mono text-white/80 shadow-lg">
+            <div className="fixed bottom-4 left-1/2 -translate-x-1/2 z-50 flex items-center gap-1.5 rounded-full bg-black/70 backdrop-blur-sm px-3 py-1.5 text-[11px] font-mono text-white/80 shadow-lg">
               <span className="size-1.5 rounded-full bg-emerald-400 animate-pulse" />
               Responsive
             </div>
diff --git a/apps/examples/app/reveal-all/page.tsx b/apps/examples/app/reveal-all/page.tsx
@@ -67,7 +67,7 @@ export default function RevealAllPage() {
       </AppShell>
 
       {/* Floating variant indicator */}
-      <div className="fixed bottom-4 left-4 z-[60]">
+      <div className="fixed bottom-4 left-1/2 -translate-x-1/2 z-[60]">
         <div className="flex items-center gap-1.5 rounded-full bg-black/60 backdrop-blur-sm px-3 py-1.5 text-[11px] font-mono text-white/80 shadow-lg">
           <span className="size-1.5 rounded-full bg-emerald-400 animate-pulse" />
           behavior=&quot;reveal-all&quot;
diff --git a/apps/examples/app/reveal-bottom/page.tsx b/apps/examples/app/reveal-bottom/page.tsx
@@ -67,7 +67,7 @@ export default function RevealBottomPage() {
       </AppShell>
 
       {/* Floating variant indicator */}
-      <div className="fixed bottom-4 left-4 z-[60]">
+      <div className="fixed bottom-4 left-1/2 -translate-x-1/2 z-[60]">
         <div className="flex items-center gap-1.5 rounded-full bg-black/60 backdrop-blur-sm px-3 py-1.5 text-[11px] font-mono text-white/80 shadow-lg">
           <span className="size-1.5 rounded-full bg-emerald-400 animate-pulse" />
           behavior=&quot;reveal-search&quot;
diff --git a/apps/examples/app/reveal-combined/page.tsx b/apps/examples/app/reveal-combined/page.tsx
@@ -101,7 +101,7 @@ export default function RevealCombinedPage() {
       </AppShell>
 
       {/* Floating behavior indicator */}
-      <div className="fixed bottom-20 left-4 z-40 hidden sm:block">
+      <div className="fixed bottom-20 left-1/2 -translate-x-1/2 z-40 hidden sm:block">
         <div className="flex flex-col gap-1.5 rounded-xl bg-zinc-950/90 backdrop-blur-md p-3 border border-white/10 shadow-2xl text-white/90">
           <div className="flex items-center gap-2 text-[11px] font-mono">
             <span className="size-2 rounded-full bg-blue-500 animate-pulse" />
diff --git a/apps/examples/app/reveal-content-bottom/page.tsx b/apps/examples/app/reveal-content-bottom/page.tsx
@@ -67,7 +67,7 @@ export default function RevealContentBottomPage() {
       </AppShell>
 
       {/* Floating variant indicator */}
-      <div className="fixed bottom-4 left-4 z-[60]">
+      <div className="fixed bottom-4 left-1/2 -translate-x-1/2 z-[60]">
         <div className="flex items-center gap-1.5 rounded-full bg-black/60 backdrop-blur-sm px-3 py-1.5 text-[11px] font-mono text-white/80 shadow-lg">
           <span className="size-1.5 rounded-full bg-emerald-400 animate-pulse" />
           behavior=&quot;reveal-context-search&quot;
diff --git a/apps/examples/app/reveal-content/page.tsx b/apps/examples/app/reveal-content/page.tsx
@@ -67,7 +67,7 @@ export default function RevealContentPage() {
       </AppShell>
 
       {/* Floating variant indicator */}
-      <div className="fixed bottom-4 left-4 z-[60]">
+      <div className="fixed bottom-4 left-1/2 -translate-x-1/2 z-[60]">
         <div className="flex items-center gap-1.5 rounded-full bg-black/60 backdrop-blur-sm px-3 py-1.5 text-[11px] font-mono text-white/80 shadow-lg">
           <span className="size-1.5 rounded-full bg-emerald-400 animate-pulse" />
           behavior=&quot;reveal-context&quot;
diff --git a/apps/examples/app/reveal-top-content/page.tsx b/apps/examples/app/reveal-top-content/page.tsx
@@ -67,7 +67,7 @@ export default function RevealTopContentPage() {
       </AppShell>
 
       {/* Floating variant indicator */}
-      <div className="fixed bottom-4 left-4 z-[60]">
+      <div className="fixed bottom-4 left-1/2 -translate-x-1/2 z-[60]">
         <div className="flex items-center gap-1.5 rounded-full bg-black/60 backdrop-blur-sm px-3 py-1.5 text-[11px] font-mono text-white/80 shadow-lg">
           <span className="size-1.5 rounded-full bg-emerald-400 animate-pulse" />
           behavior=&quot;reveal-nav-context&quot;
diff --git a/apps/examples/app/reveal-top/page.tsx b/apps/examples/app/reveal-top/page.tsx
@@ -67,7 +67,7 @@ export default function RevealTopPage() {
       </AppShell>
 
       {/* Floating variant indicator */}
-      <div className="fixed bottom-4 left-4 z-[60]">
+      <div className="fixed bottom-4 left-1/2 -translate-x-1/2 z-[60]">
         <div className="flex items-center gap-1.5 rounded-full bg-black/60 backdrop-blur-sm px-3 py-1.5 text-[11px] font-mono text-white/80 shadow-lg">
           <span className="size-1.5 rounded-full bg-emerald-400 animate-pulse" />
           behavior=&quot;reveal-nav&quot;
diff --git a/apps/examples/app/scroll-nav/page.tsx b/apps/examples/app/scroll-nav/page.tsx
@@ -329,7 +329,7 @@ export default function ScrollNavPage() {
         <Content className="pb-12">
           <div className="mx-auto max-w-3xl px-4 sm:px-6 pt-6">
             {/* Floating variant indicator */}
-            <div className="fixed bottom-4 left-4 z-50 flex items-center gap-1.5 rounded-full bg-black/70 backdrop-blur-sm px-3 py-1.5 text-[11px] font-mono text-white/80 shadow-lg">
+            <div className="fixed bottom-4 left-1/2 -translate-x-1/2 z-50 flex items-center gap-1.5 rounded-full bg-black/70 backdrop-blur-sm px-3 py-1.5 text-[11px] font-mono text-white/80 shadow-lg">
               <span className="size-1.5 rounded-full bg-emerald-400 animate-pulse" />
               ScrollNav
             </div>
diff --git a/apps/examples/app/sidebar/page.tsx b/apps/examples/app/sidebar/page.tsx
@@ -516,7 +516,7 @@ export default function SidebarPage() {
         </Content>
 
         {/* Variant indicator pill */}
-        <div className="fixed bottom-4 left-4 z-50 flex items-center gap-1.5 rounded-full bg-black/70 backdrop-blur-sm px-3 py-1.5 text-[11px] font-mono text-white/80 shadow-lg">
+        <div className="fixed bottom-4 left-1/2 -translate-x-1/2 z-50 flex items-center gap-1.5 rounded-full bg-black/70 backdrop-blur-sm px-3 py-1.5 text-[11px] font-mono text-white/80 shadow-lg">
           <span className="size-1.5 rounded-full bg-emerald-400 animate-pulse" />
           variant=&quot;sidebar&quot;
         </div>
diff --git a/apps/examples/app/static-header/page.tsx b/apps/examples/app/static-header/page.tsx
@@ -125,7 +125,7 @@ export default function StaticHeaderPage() {
         </Content>
 
         {/* Behavior indicator */}
-        <div className="fixed bottom-4 left-4 z-50 flex items-center gap-2 rounded-full bg-zinc-950/90 px-4 py-2 text-[11px] font-mono text-white/90 shadow-2xl backdrop-blur-md border border-white/10">
+        <div className="fixed bottom-4 left-1/2 -translate-x-1/2 z-50 flex items-center gap-2 rounded-full bg-zinc-950/90 px-4 py-2 text-[11px] font-mono text-white/90 shadow-2xl backdrop-blur-md border border-white/10">
           <span className="size-2 rounded-full bg-blue-500 animate-pulse" />
           HEADER: behavior=&quot;static&quot;
         </div>
diff --git a/apps/examples/app/sticky-tabs/page.tsx b/apps/examples/app/sticky-tabs/page.tsx
@@ -133,7 +133,7 @@ export default function StickyTabsPage() {
         </Content>
 
         {/* Behavior indicator */}
-        <div className="fixed bottom-4 left-4 z-50 flex flex-col gap-2 rounded-2xl bg-zinc-950/90 p-3 text-white/90 shadow-2xl backdrop-blur-md border border-white/10 sm:flex-row sm:items-center sm:rounded-full sm:px-4 sm:py-2">
+        <div className="fixed bottom-4 left-1/2 -translate-x-1/2 z-50 flex flex-col gap-2 rounded-2xl bg-zinc-950/90 p-3 text-white/90 shadow-2xl backdrop-blur-md border border-white/10 sm:flex-row sm:items-center sm:rounded-full sm:px-4 sm:py-2">
           <div className="flex items-center gap-2 text-[11px] font-mono whitespace-nowrap border-b border-white/10 pb-2 sm:border-b-0 sm:pb-0 sm:pr-3 sm:border-r sm:mr-1">
             <span className="size-2 rounded-full bg-blue-500 animate-pulse" />
             HEADER: behavior=&quot;fixed&quot;
diff --git a/apps/examples/app/tab-bar/page.tsx b/apps/examples/app/tab-bar/page.tsx
@@ -336,7 +336,7 @@ export default function TabBarPage() {
       </AppShell>
 
       {/* Floating variant indicator */}
-      <div className="fixed bottom-20 left-4 z-50 flex items-center gap-1.5 rounded-full bg-black/70 backdrop-blur-sm px-3 py-1.5 text-[11px] font-mono text-white/80 shadow-lg">
+      <div className="fixed bottom-20 left-1/2 -translate-x-1/2 z-50 flex items-center gap-1.5 rounded-full bg-black/70 backdrop-blur-sm px-3 py-1.5 text-[11px] font-mono text-white/80 shadow-lg">
         <span className="size-1.5 rounded-full bg-emerald-400 animate-pulse" />
         variant=&quot;tab-bar&quot; behavior=&quot;auto-hide&quot;
       </div>
