From 67d05a23fc7516e5fc701b403bab43053d0caa59 Mon Sep 17 00:00:00 2001
From: Shyamalan Kannan <78594762+Yabuku-xD@users.noreply.github.com>
Date: Wed, 29 Apr 2026 02:30:00 -0700
Subject: [PATCH] fix(ui): center skills empty state and fix terminal toolbar
 overlap (#1064)

* fix(ui): center skills empty state and fix terminal toolbar overlap

Fix two UI layout issues in the settings and terminal views.

Skills empty state:

- Add h-full to the max-w-3xl content wrapper so flex centering works

- Make book icon responsive (h-10 w-10 sm:h-12 sm:w-12)

- Add px-4 padding for narrow viewports

Terminal toolbar:

- Reserve right padding (pr-20) for dock fullscreen/close buttons

- Remove pb-1 from quick keys to fix vertical misalignment

- Change shrink-0 to min-w-0 for graceful shrinking on narrow widths

* ref(ui): gate pr-20 padding on desktop runtime only
---
 packages/ui/src/components/sections/skills/SkillsPage.tsx | 6 +++---
 packages/ui/src/components/views/SettingsView.tsx         | 4 ++--
 packages/ui/src/components/views/TerminalView.tsx         | 4 ++--
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/ui/src/components/sections/skills/SkillsPage.tsx b/packages/ui/src/components/sections/skills/SkillsPage.tsx
index f20c98e9..2321b26e 100644
--- a/packages/ui/src/components/sections/skills/SkillsPage.tsx
+++ b/packages/ui/src/components/sections/skills/SkillsPage.tsx
@@ -357,9 +357,9 @@ const SkillsInstalledPage: React.FC = () => {
 
   if ((!selectedSkillName && !skillDraft) || hasStaleSelection) {
     return (
-      <div className="flex h-full items-center justify-center">
+      <div className="flex h-full items-center justify-center px-4">
         <div className="text-center text-muted-foreground">
-          <RiBookOpenLine className="mx-auto mb-3 h-12 w-12 opacity-50" />
+          <RiBookOpenLine className="mx-auto mb-3 h-10 w-10 sm:h-12 sm:w-12 opacity-50" />
           <p className="typography-body">{t('settings.skills.page.empty.title')}</p>
           <p className="typography-meta mt-1 opacity-75">{t('settings.skills.page.empty.description')}</p>
         </div>
@@ -369,7 +369,7 @@ const SkillsInstalledPage: React.FC = () => {
 
   if (isLoading) {
     return (
-      <div className="flex h-full items-center justify-center">
+      <div className="flex h-full items-center justify-center px-4">
         <div className="text-center text-muted-foreground">
           <p className="typography-body">{t('settings.skills.page.loading.details')}</p>
         </div>
diff --git a/packages/ui/src/components/views/SettingsView.tsx b/packages/ui/src/components/views/SettingsView.tsx
index ffecbda5..f4dc2406 100644
--- a/packages/ui/src/components/views/SettingsView.tsx
+++ b/packages/ui/src/components/views/SettingsView.tsx
@@ -670,7 +670,7 @@ export const SettingsView: React.FC<SettingsViewProps> = ({ onClose, forceMobile
             <ErrorBoundary>{renderPageSidebar(settingsSlug, {})}</ErrorBoundary>
           </div>
           <div className="flex-1 overflow-auto scrollbar-none bg-background">
-            <div className="mx-auto w-full max-w-3xl">
+            <div className="mx-auto h-full w-full max-w-3xl">
               <ErrorBoundary>{renderPageContent(settingsSlug)}</ErrorBoundary>
             </div>
           </div>
@@ -680,7 +680,7 @@ export const SettingsView: React.FC<SettingsViewProps> = ({ onClose, forceMobile
 
     return (
       <div className="h-full overflow-auto scrollbar-none bg-background">
-        <div className="mx-auto w-full max-w-3xl">
+        <div className="mx-auto h-full w-full max-w-3xl">
           <ErrorBoundary>{renderPageContent(settingsSlug)}</ErrorBoundary>
         </div>
       </div>
diff --git a/packages/ui/src/components/views/TerminalView.tsx b/packages/ui/src/components/views/TerminalView.tsx
index f59f6e02..b9f8eda5 100644
--- a/packages/ui/src/components/views/TerminalView.tsx
+++ b/packages/ui/src/components/views/TerminalView.tsx
@@ -1012,7 +1012,7 @@ export const TerminalView: React.FC = () => {
 
     return (
         <div className="flex h-full flex-col overflow-hidden bg-[var(--surface-background)]">
-            <div className={cn('sticky top-0 z-20 shrink-0 bg-[var(--surface-background)] text-xs', isMobile ? 'px-4 py-1.5' : 'px-5 py-2')}>
+            <div className={cn('sticky top-0 z-20 shrink-0 bg-[var(--surface-background)] text-xs', isMobile ? 'px-4 py-1.5' : runtime.platform === 'desktop' ? 'pl-5 pr-20 py-2' : 'px-5 py-2')}>
                 {enableTabs && directoryTerminalState ? (
                     <div className={cn('pl-1 pr-1 flex items-center gap-2', isMobile ? 'mt-1' : 'mt-2')}>
                         <div className={cn('min-w-0 flex-1 overflow-x-auto', isMobile ? 'pb-0.5' : 'pb-1')}>
@@ -1075,7 +1075,7 @@ export const TerminalView: React.FC = () => {
                         </div>
 
                         {!isMobile && showQuickKeys ? (
-                            <div className="flex shrink-0 items-center gap-1 overflow-x-auto pb-1">
+                            <div className="flex min-w-0 items-center gap-1 overflow-x-auto">
                                 {quickKeysControls}
                             </div>
                         ) : null}