From bc2669b6050da7acdf9e1dda2b77444734852559 Mon Sep 17 00:00:00 2001
From: xXJSONDeruloXx <danielhimebauch@gmail.com>
Date: Fri, 11 Sep 2026 10:00:19 -0400
Subject: workaround for new client update, ui cuts off in game

---
 src/components/Content.tsx | 22 +++++++++++++---------
 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;
-- 
cgit v1.2.3