fix: minor UI issues

src/mainview/components/Header.tsx

@@ -290,7 +290,7 @@ export function HeaderStatusBar (data: { buttons?: HeaderButton[]; buttonElement
         className="header-icon sm:size-10 md:size-16"
         id={b.id}
         external={b.external}
-        style={{ viewTransitionName: `header-button-${b.id}` }}
+        cssStyle={{ viewTransitionName: `header-button-${b.id}` }}
         onAction={b.action}
       >{b.icon}</RoundButton>)}
     </div>

src/mainview/components/RoundButton.tsx

@@ -8,11 +8,11 @@ export function RoundButton (data: {
   className?: string;
   external?: boolean;
   style?: ButtonStyle;
+  cssStyle?: CSSProperties;
 } & InteractParams & FocusParams)
 {
-
   return (
-    <Button onFocus={data.onFocus} id={data.id} style={data.style} className={twMerge("rounded-full", data.external && "focusable focusable-primary focusable-hover", data.className)} onAction={data.onAction}>
+    <Button cssStyle={data.cssStyle} onFocus={data.onFocus} id={data.id} style={data.style} className={twMerge("rounded-full", data.external && "focusable focusable-primary focusable-hover", data.className)} onAction={data.onAction}>
       {data.children}
     </Button>
 

src/mainview/components/options/Button.tsx

@@ -6,6 +6,7 @@ import
 } from "@noriginmedia/norigin-spatial-navigation";
 import classNames from "classnames";
 import { GamePadButtonCode, Shortcut, useShortcuts } from "@/mainview/scripts/shortcuts";
+import { CSSProperties } from "react";
 
 export type ButtonStyle = 'base' | 'accent' | 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error';
 
@@ -29,6 +30,7 @@ export function Button (data: {
     style?: ButtonStyle,
     shortcutLabel?: string;
     focusClassName?: string;
+    cssStyle?: CSSProperties;
 } & InteractParams & FocusParams)
 {
     const { ref, focused, focusKey } = useFocusable({
@@ -47,6 +49,7 @@ export function Button (data: {
         ref={ref}
         onClick={e => data.onAction?.(e.nativeEvent)}
         disabled={data.disabled}
+        style={data.cssStyle}
         className={twMerge("flex items-center justify-center px-4 py-2 disabled:bg-base-200/40 disabled:text-base-content/40 cursor-pointer rounded-3xl md:text-lg not-control-mouse:focused:drop-shadow-lg border border-base-content/5 not-control-mouse:focused:bg-base-content not-control-mouse:focused:text-base-100 control-mouse:hover:bg-base-content control-mouse:hover:text-base-100 active:transition-none active:ring-offset-4",
             styles[data.style ?? 'base'],
             focused ? data.focusClassName : undefined,

src/mainview/gen/static-icon-assets.gen.ts

@@ -464,7 +464,7 @@ const assets = new Set<string>([
 ]);
 
 // Store basePath resolved from Vite config
-const BASE_PATH = "/";
+const BASE_PATH = "./";
 
 
 /**

src/mainview/routes/game/$source.$id.tsx

@@ -64,26 +64,12 @@ function Error (data: ErrorComponentProps)
   </AnimatedBackground>;
 }
 
-function GameDetailsUIPending ()
+function MainDetailsPending ()
 {
-  const { ref, focusKey, focusSelf } = useFocusable({ focusKey: "game-details-error", preferredChildFocusKey: "main-details" });
 
-  useShortcuts(focusKey, () => [{ label: "Back", button: GamePadButtonCode.B, action: HandleGoBack }]);
-  const { shortcuts } = useShortcutContext();
-  useEffect(() =>
-  {
-    focusSelf();
-  }, []);
+  const { ref } = useFocusable({ focusKey: "main-details" });
 
-  return <AnimatedBackground ref={ref} backgroundKey="game-details">
-    <div className="z-10">
-      <FocusContext value={focusKey}>
-        <div className="h-0" />
-        <div className="sticky group top-0 bg-base-100/40 group p-2 z-15 transition-colors data-stuck:backdrop-blur-3xl">
-          <HeaderUI />
-        </div>
-        <div className="flex flex-col h-[80vh] overflow-hidden bg-linear-to-t from-base-100 to-base-100/40">
-          <main ref={ref} className="flex p-3 flex-col flex-1 min-h-0">
+  return <main ref={ref} className="flex p-3 flex-col flex-1 min-h-0">
     <section className="flex portrait:flex-col my-4 sm:p-0 md:px-12 md:pb-8 pt-4 sm:gap-8 md:gap-12 portrait:w-full h-full min-h-0 rounded-4xl flex-1 z-0 sm:text-sm md:text-base">
       <div className="flex gap-6 overflow-hidden bg-base-100 justify-end portrait:w-full rounded-3xl aspect-3/4 portrait:h-24 p-4">
         <div className="skeleton w-full h-full"></div>
@@ -111,7 +97,29 @@ function GameDetailsUIPending ()
         </div>
       </div>
     </section>
-          </main>
+  </main>;
+}
+
+function GameDetailsUIPending ()
+{
+  const { ref, focusKey, focusSelf } = useFocusable({ focusKey: "game-details-error", preferredChildFocusKey: "main-details" });
+
+  useShortcuts(focusKey, () => [{ label: "Back", button: GamePadButtonCode.B, action: HandleGoBack }]);
+  const { shortcuts } = useShortcutContext();
+  useEffect(() =>
+  {
+    focusSelf();
+  }, []);
+
+  return <AnimatedBackground ref={ref} backgroundKey="game-details">
+    <div className="z-10">
+      <FocusContext value={focusKey}>
+        <div className="h-0" />
+        <div className="sticky group top-0 bg-base-100/40 group p-2 z-15 transition-colors data-stuck:backdrop-blur-3xl">
+          <HeaderUI />
+        </div>
+        <div className="flex flex-col h-[80vh] overflow-hidden bg-linear-to-t from-base-100 to-base-100/40">
+          <MainDetailsPending />
         </div>
         <div className="bg-base-200">
           <div className="divider m-0 pb-12"><div className="flex items-center gap-3 opacity-60"><Image className="sm:size-4 md:size-6" />Screenshots</div></div>