From 136aacded1ce16ed8c8f2735b0522c3076e40a3e Mon Sep 17 00:00:00 2001
From: heaven <vojochatdev@gmail.com>
Date: Wed, 27 May 2026 23:48:49 +0300
Subject: [PATCH] fix(stream-header): tighten Segment paddings and cluster gaps
 so plus/search icons stop clipping past the right edge on 360 px Android
 viewports

---
 .../stream-header/StreamHeader.css.ts         | 27 +++++++++++++++----
 src/app/state/sidebarWidth.ts                 |  9 ++++---
 2 files changed, 28 insertions(+), 8 deletions(-)

diff --git a/src/app/components/stream-header/StreamHeader.css.ts b/src/app/components/stream-header/StreamHeader.css.ts
index b2303c47..664b2a10 100644
--- a/src/app/components/stream-header/StreamHeader.css.ts
+++ b/src/app/components/stream-header/StreamHeader.css.ts
@@ -82,7 +82,14 @@ export const tabsRow = style({
   height: toRem(TABS_ROW_PX),
   display: 'flex',
   alignItems: 'center',
-  padding: `0 ${toRem(8)}`,
+  // Horizontal padding is tuned for the narrowest target: Android 360 px
+  // viewport (Pixel/Galaxy base) must fit 3 RU segments (Личные/Каналы/
+  // Роботы) + Plus + Search without iconsCluster being pushed past the
+  // right edge. Reducing this from 8 → 6 saves 4 px across the row;
+  // combined with the tightened Segment / cluster gaps below, the floor
+  // drops from ≈378 px to ≈350 px. See sidebarWidth.ts for the desktop
+  // resize floor that mirrors this measurement.
+  padding: `0 ${toRem(6)}`,
   selectors: {
     '[data-platform="web"] &': {
       height: toRem(WEB_TABS_ROW_PX),
@@ -94,14 +101,17 @@ export const tabsRow = style({
 export const tabsCluster = style({
   display: 'flex',
   alignItems: 'center',
-  gap: toRem(4),
+  // Tightened from 4 → 2 px so the 3 RU segments + 2 action icons fit
+  // inside a 360 px viewport (standard Android base width). See the
+  // `tabsRow` padding comment for the full row-fit budget.
+  gap: toRem(2),
   alignSelf: 'stretch',
 });
 
 export const iconsCluster = style({
   display: 'flex',
   alignItems: 'center',
-  gap: toRem(4),
+  gap: toRem(2),
   flexShrink: 0,
 });
 
@@ -242,6 +252,13 @@ export const bottomPinnedSlot = style({
 });
 
 // Segment button (Direct / Channels / Bots).
+//
+// Horizontal padding (8 px) and dot-to-label gap (6 px) are the tightest
+// values that still keep the tap target comfortable on touch. They're
+// load-bearing for the row-fit budget on 360 px Android viewports — see
+// `tabsRow` above. Vertical padding (8 px) is kept full for hit-target
+// height; the row is height-fixed by `TABS_ROW_PX` so trimming vertical
+// padding wouldn't buy any width.
 export const segment = recipe({
   base: {
     appearance: 'none',
@@ -249,14 +266,14 @@ export const segment = recipe({
     background: 'transparent',
     color: color.Background.OnContainer,
     cursor: 'pointer',
-    padding: `${toRem(8)} ${toRem(10)}`,
+    padding: toRem(8),
     borderRadius: toRem(8),
     font: 'inherit',
     fontSize: toRem(14),
     lineHeight: 1.2,
     display: 'inline-flex',
     alignItems: 'center',
-    gap: toRem(8),
+    gap: toRem(6),
     whiteSpace: 'nowrap',
     fontWeight: 500,
     WebkitAppearance: 'none',
diff --git a/src/app/state/sidebarWidth.ts b/src/app/state/sidebarWidth.ts
index a13ff5ee..1e553b63 100644
--- a/src/app/state/sidebarWidth.ts
+++ b/src/app/state/sidebarWidth.ts
@@ -7,9 +7,12 @@ import {
 export const SIDEBAR_WIDTH_KEY = 'vojo_sidebar_width';
 // Floor must fit the StreamHeader tabs row in full: 3 segment buttons
 // (Личные/Каналы/Роботы — RU is the widest locale) plus the two
-// action icons (Plus / Search) plus the row's 8px horizontal padding.
-// Measured at ≈378px in RU; 384 gives a few px of breathing room and
-// keeps the icon cluster from clipping at the curtain's right edge.
+// action icons (Plus / Search) plus the row's horizontal padding.
+// After tightening Segment / cluster paddings + gaps (see StreamHeader.
+// css.ts::tabsRow comment) the row now fits at ≈350px; 384 keeps a
+// comfortable margin for desktop chat-list readability without being
+// the binding constraint anymore. Lowering this further is a list-row
+// usability decision, not a header-fit one.
 export const SIDEBAR_WIDTH_MIN = 384;
 export const SIDEBAR_WIDTH_DEFAULT = 416;