diff options
| -rw-r--r-- | src/components/Content.tsx | 22 | ||||
| -rw-r--r-- | src/styles.ts | 4 |
2 files changed, 17 insertions, 9 deletions
diff --git a/src/components/Content.tsx b/src/components/Content.tsx index 422eec8..32e9bf8 100644 --- a/src/components/Content.tsx +++ b/src/components/Content.tsx @@ -1,5 +1,5 @@ import { Tabs } from "@decky/ui"; -import { useEffect, useRef, useState, type FocusEvent } from "react"; +import { useEffect, useRef, useState, type FocusEvent, type ReactNode } from "react"; import { FaCube, FaFileAlt, FaGamepad, FaList, FaTools } from "react-icons/fa"; import { ConfigurationData } from "../config/configSchema"; import { useFlatpakConfiguration } from "../hooks/useFlatpakConfiguration"; @@ -141,6 +141,10 @@ export function Content() { /> ); + const tabContent = (content: ReactNode) => ( + <div className="lsfg-vk-tab-content">{content}</div> + ); + const nowPlaying = nowPlayingTarget?.kind === "steam" ? ( <NowPlayingTab game={nowPlayingTarget.game} @@ -159,11 +163,11 @@ export function Content() { const tabs = setupComplete ? [ - ...(nowPlaying ? [{ id: "NowPlaying", title: tabIcons.nowPlaying, content: nowPlaying }] : []), + ...(nowPlaying ? [{ id: "NowPlaying", title: tabIcons.nowPlaying, content: tabContent(nowPlaying) }] : []), { id: "Games", title: tabIcons.games, - content: ( + content: tabContent( <ConfigurationTab config={config} targets={targets} @@ -177,13 +181,13 @@ export function Content() { onRepair={repair} onReset={resetSelected} onResetAll={resetAll} - /> + />, ), }, { id: "Flatpak", title: tabIcons.flatpak, - content: ( + content: tabContent( <FlatpakTab apps={flatpak.apps} runningApp={runningFlatpak} @@ -194,13 +198,13 @@ export function Content() { onRemove={flatpak.removeApp} onConfigChange={flatpak.updateConfig} onWorkaroundChange={flatpak.updateWorkarounds} - /> + />, ), }, - ...(showDebugTab ? [{ id: "ConfigFile", title: tabIcons.configFile, content: <ConfigFileTab /> }] : []), - { id: "Setup", title: tabIcons.setup, content: setup }, + ...(showDebugTab ? [{ id: "ConfigFile", title: tabIcons.configFile, content: tabContent(<ConfigFileTab />) }] : []), + { id: "Setup", title: tabIcons.setup, content: tabContent(setup) }, ] - : [{ id: "Setup", title: tabIcons.setup, content: setup }]; + : [{ id: "Setup", title: tabIcons.setup, content: tabContent(setup) }]; const availableTabIds = new Set(tabs.map(({ id }) => id)); const activeTab = availableTabIds.has(tab) ? tab : setupComplete ? "Games" : "Setup"; diff --git a/src/styles.ts b/src/styles.ts index d197451..58c6b01 100644 --- a/src/styles.ts +++ b/src/styles.ts @@ -10,6 +10,10 @@ export const tabStyles = ` padding-right: 8px !important; } + .lsfg-vk-tabs .lsfg-vk-tab-content { + padding-bottom: 96px; // workaround for in-game bottom bar padding behaving differently than in launcher, remove later? + } + .lsfg-vk-tabs [role="tablist"] { display: flex; flex-wrap: nowrap; |
