Merge pull request #248 from appergb/fix/overview-no-scroll-243

fix(ui): 概览页整屏不滚 + 其他页 scrollbar 变细 (#243)

Author: appergb

openless-all/app/src/components/FloatingShell.tsx

@@ -260,6 +260,14 @@ function FloatingShellBody({ os, initialTab, initialSettings }: { os: OS; initia
                     两列内部各自的 overflow:auto 才能独立滚动 */}
             <div
               key={displayTab}
+              // issue #243：所有 tab 都允许 overflow:auto，让窗口被压缩 / 文案
+              //   变长时仍可触达底部内容（Codex P1：之前 overview 用 hidden
+              //   会让缩窗后 Recent 卡彻底不可见）。
+              //   - Overview 借 Overview.tsx 内部 flex 把底部行 grow 到撑满，
+              //     正常尺寸下内容刚好占满 → 浏览器自动不显示 scrollbar；
+              //     真挤不下了才 fallback 出细滚动条。
+              //   - 其他 tab 同样走细滚动条。
+              className="ol-thinscroll"
               style={{
                 flex: 1, minHeight: 0,
                 overflow: 'auto',

openless-all/app/src/components/SettingsModal.tsx

@@ -164,7 +164,7 @@ export function SettingsModal({ os: _os, onClose, initialSettingsSection }: Sett
             </div>
           ) : (
             // personalize / about 短内容：单一 scroll wrapper，超出时本块滚动。
-            <div style={{ flex: 1, minHeight: 0, overflow: 'auto', padding: '10px 28px 28px' }}>
+            <div className="ol-thinscroll" style={{ flex: 1, minHeight: 0, overflow: 'auto', padding: '10px 28px 28px' }}>
               {section === 'personalize' && <PersonalizeSection />}
               {section === 'about' && <AboutMini />}
             </div>

openless-all/app/src/pages/History.tsx

@@ -126,7 +126,7 @@ export function History() {
               ))}
             </div>
           </div>
-          <div style={{ flex: 1, overflow: 'auto', padding: 6 }}>
+          <div className="ol-thinscroll" style={{ flex: 1, overflow: 'auto', padding: 6 }}>
             {loading && <div style={{ padding: 16, fontSize: 12, color: 'var(--ol-ink-4)' }}>{t('common.loading')}</div>}
             {!loading && filtered.length === 0 && (
               <div style={{ padding: 16, fontSize: 12, color: 'var(--ol-ink-4)' }}>
@@ -164,7 +164,7 @@ export function History() {
           </div>
         </Card>
 
-        <Card padding={20} style={{ overflow: 'auto' }}>
+        <Card padding={20} className="ol-thinscroll" style={{ overflow: 'auto' }}>
           {item ? (
             <>
               <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 14 }}>

openless-all/app/src/pages/Overview.tsx

@@ -94,8 +94,11 @@ export function Overview({ onOpenHistory }: OverviewProps) {
         <Metric icon="bolt" label={t('overview.metricTotal')} value={String(history.length)} trend={t('overview.metricTotalTrend')} accent />
       </div>
 
-      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 12 }}>
-        <Card padding={18}>
+      {/* 底部一行 = flex:1 撑满剩余高度（父 wrapper 是 display:flex/column）。
+          只有「最近识别」内部允许滚动；其他卡片按内容自然高度，不破裂底部圆角。
+          issue #243 follow-up：去掉外层 overflow 后底部圆角被裁的视觉问题。 */}
+      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 12, flex: 1, minHeight: 0 }}>
+        <Card padding={18} style={{ display: 'flex', flexDirection: 'column', minHeight: 0 }}>
           <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 14 }}>
             <span style={{ fontSize: 12, fontWeight: 600, color: 'var(--ol-ink-2)' }}>{t('overview.weekTitle')}</span>
             <span style={{ fontSize: 11, color: 'var(--ol-ink-4)' }}>{t('overview.weekUnit')}</span>
@@ -106,12 +109,12 @@ export function Overview({ onOpenHistory }: OverviewProps) {
           </div>
         </Card>
 
-        <Card padding={0}>
-          <div style={{ padding: '14px 18px', borderBottom: '0.5px solid var(--ol-line)', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+        <Card padding={0} style={{ display: 'flex', flexDirection: 'column', minHeight: 0, overflow: 'hidden' }}>
+          <div style={{ padding: '14px 18px', borderBottom: '0.5px solid var(--ol-line)', display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexShrink: 0 }}>
             <span style={{ fontSize: 12, fontWeight: 600, color: 'var(--ol-ink-2)' }}>{t('overview.recentTitle')}</span>
             <Btn size="sm" variant="ghost" onClick={onOpenHistory}>{t('overview.recentAll')}</Btn>
           </div>
-          <div>
+          <div className="ol-thinscroll" style={{ flex: 1, minHeight: 0, overflow: 'auto' }}>
             {history.length === 0 && (
               <div style={{ padding: 24, textAlign: 'center', fontSize: 12, color: 'var(--ol-ink-4)' }}>
                 {t('overview.recentEmpty', { trigger: getHotkeyTriggerLabel(hotkey?.trigger) })}

openless-all/app/src/pages/Settings.tsx

@@ -115,6 +115,7 @@ export function Settings({ embedded = false, initialSection = 'recording' }: Set
           ))}
         </div>
         <div
+          className={embedded ? 'ol-thinscroll' : undefined}
           style={{
             display: 'flex',
             flexDirection: 'column',

openless-all/app/src/pages/_atoms.tsx

@@ -32,11 +32,13 @@ interface CardProps {
   style?: CSSProperties;
   padding?: number;
   glassy?: boolean;
+  className?: string;
 }
 
-export function Card({ children, style, padding = 18, glassy = false }: CardProps) {
+export function Card({ children, style, padding = 18, glassy = false, className }: CardProps) {
   return (
     <div
+      className={className}
       style={{
         background: glassy ? 'rgba(255,255,255,0.55)' : 'var(--ol-surface)',
         backdropFilter: glassy ? 'blur(20px) saturate(160%)' : undefined,

openless-all/app/src/styles/tokens.css

@@ -78,6 +78,16 @@ body {
 .ol-noscrollbar::-webkit-scrollbar { display: none; }
 .ol-noscrollbar { scrollbar-width: none; }
 
+/* Thin scrollbar — 细而可见，保留"可以滚"的可见性，但不抢眼。issue #243 */
+.ol-thinscroll::-webkit-scrollbar { width: 6px; height: 6px; }
+.ol-thinscroll::-webkit-scrollbar-track { background: transparent; }
+.ol-thinscroll::-webkit-scrollbar-thumb {
+  background: rgba(0, 0, 0, 0.18);
+  border-radius: 3px;
+}
+.ol-thinscroll::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.28); }
+.ol-thinscroll { scrollbar-width: thin; scrollbar-color: rgba(0, 0, 0, 0.18) transparent; }
+
 /* Glass surface */
 .ol-glass {
   background: var(--ol-glass-bg);