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,6 +64,42 @@ function Error (data: ErrorComponentProps)
   </AnimatedBackground>;
 }
 
+function MainDetailsPending ()
+{
+
+  const { ref } = useFocusable({ focusKey: "main-details" });
+
+  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>
+      </div>
+      <div className="flex-2 flex flex-col sm:gap-1 md:gap-6 sm:pt-2 md:pt-16 min-h-0">
+        <div className="flex flex-wrap sm:gap-4 md:gap-6 shrink-0">
+          <Detail icon={<Clock />} ></Detail>
+          <Detail icon={<div className="skeleton size-6" />} ><div className="skeleton h-4 w-32"></div></Detail>
+          <Detail icon={
+            <Store />
+          } >
+
+          </Detail>
+        </div>
+        <div className="md:hidden divider divider-vertical m-0"></div>
+        <div className="text-base-content/80 flex-1 min-h-0 leading-relaxed grow text-wrap whitespace-break-spaces text-ellipsis overflow-hidden text-lg">
+          <div className="flex flex-col gap-4 w-full">
+            <div className="skeleton h-4 w-[30%]"></div>
+            <div className="skeleton h-4 w-[80%]"></div>
+            <div className="skeleton h-4 w-full"></div>
+            <div className="skeleton h-4 w-[60%]"></div>
+            <div className="skeleton h-4 w-full"></div>
+            <div className="skeleton h-4 w-[80%]"></div>
+          </div>
+        </div>
+      </div>
+    </section>
+  </main>;
+}
+
 function GameDetailsUIPending ()
 {
   const { ref, focusKey, focusSelf } = useFocusable({ focusKey: "game-details-error", preferredChildFocusKey: "main-details" });
@@ -83,35 +119,7 @@ function GameDetailsUIPending ()
           <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">
+          <MainDetailsPending />
-            <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>
-              </div>
-              <div className="flex-2 flex flex-col sm:gap-1 md:gap-6 sm:pt-2 md:pt-16 min-h-0">
-                <div className="flex flex-wrap sm:gap-4 md:gap-6 shrink-0">
-                  <Detail icon={<Clock />} ></Detail>
-                  <Detail icon={<div className="skeleton size-6" />} ><div className="skeleton h-4 w-32"></div></Detail>
-                  <Detail icon={
-                    <Store />
-                  } >
-
-                  </Detail>
-                </div>
-                <div className="md:hidden divider divider-vertical m-0"></div>
-                <div className="text-base-content/80 flex-1 min-h-0 leading-relaxed grow text-wrap whitespace-break-spaces text-ellipsis overflow-hidden text-lg">
-                  <div className="flex flex-col gap-4 w-full">
-                    <div className="skeleton h-4 w-[30%]"></div>
-                    <div className="skeleton h-4 w-[80%]"></div>
-                    <div className="skeleton h-4 w-full"></div>
-                    <div className="skeleton h-4 w-[60%]"></div>
-                    <div className="skeleton h-4 w-full"></div>
-                    <div className="skeleton h-4 w-[80%]"></div>
-                  </div>
-                </div>
-              </div>
-            </section>
-          </main>
         </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>