fix(ui): titlebar causing layout shifts

src/components/errorComponent/index.tsx

@@ -1,28 +1,38 @@
-import { cn } from "@/lib";
+import { useSettings } from "@/hooks";
+import { cn, shouldHideTitleBar } from "@/lib";
 import { ErrorComponentProps, Link } from "@tanstack/react-router";
 import { Button, buttonVariants } from "../ui/button";
 import { ScrollArea } from "../ui/scroll-area";
 
 const ErrorComponent = (props: ErrorComponentProps) => {
+  const { settings } = useSettings();
+
   return (
-    <div className="flex flex-col items-start justify-start h-screen w-full p-4 gap-3">
+    <div
+      className={cn(
+        "flex flex-col items-start h-screen justify-start w-full gap-3 p-4",
+        {
+          "h-[calc(100vh-2rem)]": !shouldHideTitleBar(settings?.titleBarStyle),
+        }
+      )}
+    >
       <div className="flex flex-col items-start justify-center w-full gap-0.5">
         <h1 className="text-3xl font-bold">{props.error.name}</h1>
         <h2 className="text-lg text-muted-foreground">{props.error.message}</h2>
       </div>
-      <div className="flex-1 overflow-hidden p-1 w-full">
+      <div className="flex-1 w-full p-1 overflow-hidden">
         <ScrollArea
           className={cn(
             "rounded-lg shadow-lg transition-all ease-in-out size-full ring-1 ring-muted p-3 overflow-y-auto"
           )}
         >
-          <pre className="text-balance text-sm font-mono text-muted-foreground whitespace-pre-wrap w-full">
+          <pre className="w-full font-mono text-sm whitespace-pre-wrap text-balance text-muted-foreground">
             {props.error.stack}
           </pre>
         </ScrollArea>
       </div>
-      <div className="flex flex-col w-full items-center">
-        <div className="flex flex-row gap-2 justify-between w-full">
+      <div className="flex flex-col items-center w-full">
+        <div className="flex flex-row justify-between w-full gap-2">
           <Link to="/" className={buttonVariants({ variant: "secondary" })}>
             Go to Home
           </Link>

src/features/navigation/components/navbar.tsx

@@ -1,5 +1,5 @@
 import { useSettings } from "@/hooks";
-import { cn } from "@/lib";
+import { cn, shouldHideTitleBar } from "@/lib";
 import NavBarBottom from "./containers/bottom";
 import NavBarTop from "./containers/top";
 
@@ -13,7 +13,7 @@ const NavBar = () => {
       className={cn(
         "fixed inset-y-0  left-0 z-10 w-16 flex flex-col border-r bg-background",
         {
-          "top-8": !["none", "native"].includes(titleBarStyle),
+          "top-8": !shouldHideTitleBar(titleBarStyle),
         }
       )}
     >

src/features/settings/components/sidebar.tsx

@@ -1,6 +1,7 @@
 import { AppInfo, LinkItemType } from "@/@types";
 import { useLanguageContext } from "@/contexts/I18N";
-import { invoke } from "@/lib";
+import { useSettings } from "@/hooks";
+import { cn, invoke, shouldHideTitleBar } from "@/lib";
 import { useQuery } from "@tanstack/react-query";
 import { ReactElement } from "react";
 import { FaDiscord, FaGithub } from "react-icons/fa6";
@@ -34,6 +35,7 @@ const SettingsSidebar = ({
   settingsTabs: ReactElement[];
 }) => {
   const { t } = useLanguageContext();
+  const { settings } = useSettings();
 
   const { data, isPending, isError } = useQuery({
     queryKey: ["settings", "version"],
@@ -44,9 +46,16 @@ const SettingsSidebar = ({
   });
 
   return (
-    <div className="fixed inset-y-0 top-8 flex flex-col w-full md:w-80 bg-background h-[calc(100vh-2rem)]">
+    <div
+      className={cn(
+        "fixed inset-y-0 top-0 flex flex-col w-full md:w-80 bg-background h-[calc(100vh-2rem)]",
+        {
+          "top-8": !shouldHideTitleBar(settings?.titleBarStyle),
+        }
+      )}
+    >
       <div className="p-4">
-        <h1 className="text-lg md:text-xl font-bold">
+        <h1 className="text-lg font-bold md:text-xl">
           {t("sections.settings")}
         </h1>
       </div>

src/lib/helpers/helpers.ts

@@ -1,3 +1,4 @@
+import { SettingsTitleBarStyle } from "@/@types";
 import { Website } from "../api/igdb/types";
 
 export const getSteamIdFromUrl = (url: string) =>
@@ -19,3 +20,7 @@ export const createSlug = (str: string) => {
     .replace(/[^\w ]+/g, "")
     .replace(/ +/g, "-");
 };
+
+export const shouldHideTitleBar = (titleBarStyle: SettingsTitleBarStyle) => {
+  return ["none", "native"].includes(titleBarStyle);
+};

src/routes/__root.tsx

@@ -3,7 +3,7 @@ import { TooltipProvider } from "@/components/ui/tooltip";
 import NavBar from "@/features/navigation/components/navbar";
 import Updater from "@/features/updater/components/updater";
 import { useAppStartup, useSettings } from "@/hooks";
-import { cn } from "@/lib";
+import { cn, shouldHideTitleBar } from "@/lib";
 import { createRootRoute, Outlet } from "@tanstack/react-router";
 
 export const Route = createRootRoute({
@@ -26,7 +26,7 @@ function Root() {
         <Updater />
         <div
           className={cn("relative flex w-full min-h-screen bg-muted/40", {
-            "pt-8": !["none", "native"].includes(titleBarStyle),
+            "pt-8": !shouldHideTitleBar(titleBarStyle),
           })}
         >
           {/* Sidebar navigation */}

src/routes/settings.tsx

@@ -30,13 +30,13 @@ function RouteComponent() {
   );
 
   return (
-    <div className="flex w-full relative min-h-full">
+    <div className="relative flex w-full min-h-full">
       <SettingsSidebar settingsTabs={settingsTabs} />
 
-      <div className="flex-grow flex flex-col md:pl-80 w-full h-full overflow-y-auto">
+      <div className="flex flex-col flex-grow w-full h-full overflow-y-auto md:pl-80">
         <Suspense
           fallback={
-            <div className="size-full flex items-center justify-center">
+            <div className="flex items-center justify-center size-full">
               <Spinner size={23} />
             </div>
           }