BuzzbeeSCD/openchamber
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
* 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
This commit is contained in:
Shyamalan Kannan
2026-04-29 12:30:00 +03:00
committed by GitHub
parent 9424cff02c
commit 67d05a23fc
3 changed files with 7 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/src/components/sections/skills/SkillsPage.tsx
+3 -3
View File
@@ -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>
packages/ui/src/components/views/SettingsView.tsx
+2 -2
View File
@@ -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>
packages/ui/src/components/views/TerminalView.tsx
+2 -2
View File
@@ -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}