From b098a2640db9db8df851df88f53095f796875fc9 Mon Sep 17 00:00:00 2001 From: Mohamed Boudra Date: Wed, 19 Aug 2026 09:47:25 +0200 Subject: [PATCH] fix(app): tighten the mobile gap under composer track pills The pill bar floats at the foot of the stream section and the composer has no top padding, so the bar's paddingBottom is the entire pill-to-composer gap. Desktop was tuned down to 10 earlier; compact kept the original 16 and read as a hole on phone. Drop it to 8. Same constant paddings the import pill row, which tightens with it. --- packages/app/src/composer/pill-styles.ts | 2 +- packages/app/src/composer/tracks.test.tsx | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/app/src/composer/pill-styles.ts b/packages/app/src/composer/pill-styles.ts index 4c42d0c29..cd3812137 100644 --- a/packages/app/src/composer/pill-styles.ts +++ b/packages/app/src/composer/pill-styles.ts @@ -2,7 +2,7 @@ import { StyleSheet } from "react-native-unistyles"; import { SPACING } from "@/styles/theme"; export const COMPOSER_PILL_CLEARANCE = { - compact: SPACING[4], + compact: SPACING[2], wide: 10, } as const; export const COMPOSER_PILL_MIN_HEIGHT = 32; diff --git a/packages/app/src/composer/tracks.test.tsx b/packages/app/src/composer/tracks.test.tsx index e8b0d73f5..5415321fe 100644 --- a/packages/app/src/composer/tracks.test.tsx +++ b/packages/app/src/composer/tracks.test.tsx @@ -103,7 +103,7 @@ describe("ComposerTrackBar", () => { right: 0, bottom: 0, paddingHorizontal: 16, - paddingBottom: { xs: 16, md: 10 }, + paddingBottom: { xs: 8, md: 10 }, }); expect(style).not.toHaveProperty("backgroundColor"); expect(container.firstElementChild?.getAttribute("data-has-layout-handler")).toBe("false"); @@ -122,10 +122,10 @@ describe("ComposerTrackBar", () => { borderRadius: 16, }); expect(composerPillStyles.label).toMatchObject({ fontSize: 12 }); - expect(resolveComposerPillClearance(true)).toBe(16); + expect(resolveComposerPillClearance(true)).toBe(8); expect(resolveComposerPillClearance(false)).toBe(10); - expect(resolveComposerTrackTailClearance(true)).toBe(64); + expect(resolveComposerTrackTailClearance(true)).toBe(48); expect(resolveComposerTrackTailClearance(false)).toBe(52); - expect(COMPOSER_PILL_CLEARANCE).toEqual({ compact: 16, wide: 10 }); + expect(COMPOSER_PILL_CLEARANCE).toEqual({ compact: 8, wide: 10 }); }); });