summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--src/components/Content.tsx22
-rw-r--r--src/styles.ts4
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;