fix: lay the global search sheet out from the top

This commit is contained in:
Linus Rath
2026-10-31 20:26:34 +01:00
parent 718fd00c6d
commit 681e2546f0
2 changed files with 41 additions and 1 deletions
@@ -0,0 +1,30 @@
// The global search sheet put its type chips mid-screen, with empty bands
// above and below, and started the results at about 60% of the height: the
// chips' horizontal ScrollView grew like flex: 1 in the sheet's column.
import { describe, expect, it } from 'vitest';
import fs from 'node:fs';
import path from 'node:path';
const src = fs.readFileSync(path.resolve(__dirname, '../search/GlobalSearchSheet.tsx'), 'utf8');
function styleBody(name: string): string {
const m = new RegExp(`\\n\\s+${name}: \\{([^}]*)\\}`).exec(src);
expect(m, `style ${name}`).not.toBeNull();
return m![1];
}
describe('global search sheet layout', () => {
it('keeps the chip row to its own height', () => {
const scroll = /<ScrollView\s+horizontal([\s\S]*?)>/.exec(src);
expect(scroll).not.toBeNull();
const style = /\sstyle=\{styles\.(\w+)\}/.exec(scroll![1]);
expect(style, 'the horizontal ScrollView needs its own style').not.toBeNull();
const body = styleBody(style![1]);
expect(body).toMatch(/flexGrow: 0/);
expect(body).toMatch(/flexShrink: 0/);
});
it('gives the rest of the sheet to the results', () => {
expect(styleBody('results')).toMatch(/flex: 1/);
});
});
+11 -1
View File
@@ -245,7 +245,16 @@ export function GlobalSearchSheet({ visible, initialQuery = '', onClose, navigat
</View>
</View>
<ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={styles.chips} keyboardShouldPersistTaps="handled">
{/* Its own height only: a horizontal ScrollView grows like flex: 1
in a column, which put the chips mid-screen with empty bands
above and below and pushed the results down. */}
<ScrollView
horizontal
showsHorizontalScrollIndicator={false}
style={styles.chipsScroll}
contentContainerStyle={styles.chips}
keyboardShouldPersistTaps="handled"
>
{scopes.map((s) => chip(s.key, s.label, scope === s.key, () => setScope(s.key)))}
{accounts.length > 1 ? (
<>
@@ -309,6 +318,7 @@ function makeStyles(c: ThemePalette) {
borderWidth: 1, borderColor: c.border,
},
input: { flex: 1, ...typography.body, color: c.text, paddingVertical: spacing.sm },
chipsScroll: { flexGrow: 0, flexShrink: 0 },
chips: { flexDirection: 'row', alignItems: 'center', gap: spacing.xs, paddingHorizontal: spacing.md, paddingVertical: spacing.sm },
chip: {
paddingHorizontal: spacing.md, paddingVertical: 6, borderRadius: radius.full,