Unify header sizing across all pages with global Theme constants

[Copilot]

Switching between Home and Profile tabs caused visible header shift due to inconsistent padding, font sizes, and alignment. The MyHeader component had paddingTop: 4 + alignItems: center + fontSize: 24 while all other pages used fontSize: 26, alignItems: flex-start, and no extra top padding.

Changes

• New constants/Theme.ts — rem-based scale system (1rem = 16px) with named constants for FontSize, LineHeight, Spacing, and IconButton. Provides a single source of truth going forward.

export const rem = (value: number): number => Math.round(value * BASE_FONT_SIZE);

export const FontSize = {
  pageTitle: rem(1.625), // 26px – page-level headings
  display:   rem(1.75),  // 28px – hero/display headings
  // ...
} as const;

• components/header.tsx — removed paddingTop: 4, changed alignItems to flex-start, bumped logo from 24→26px. Uses FontSize.pageTitle, LineHeight.pageTitle, and IconButton constants.

• All page title styles (profile, explore, streams, bytes, archive-bytes, saved-library, manage-streams, saved-streams, user/[username]) — replaced hardcoded fontSize: 26 / lineHeight: 30 with FontSize.pageTitle / LineHeight.pageTitle.

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• cdp.expo.dev
  • Triggering command: /opt/hostedtoolcache/node/24.13.0/x64/bin/node /opt/hostedtoolcache/node/24.13.0/x64/bin/node /home/REDACTED/work/DevBits/DevBits/frontend/node_modules/expo/node_modules/@expo/cli/build/src/utils/telemetry/clients/flushFetchDetached.js /tmp/1d184f42872a6621e30fb566b7d65fa3/expo-telemetry.json (dns block)
  • Triggering command: /opt/hostedtoolcache/node/24.13.0/x64/bin/node /opt/hostedtoolcache/node/24.13.0/x64/bin/node /home/REDACTED/work/DevBits/DevBits/frontend/node_modules/expo/node_modules/@expo/cli/build/src/utils/telemetry/clients/flushFetchDetached.js /tmp/e688d24fdc887b719e848472c9b8d6ec/expo-telemetry.json (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

Original prompt

---

This section details on the original issue you should resolve

<issue_title>[Design] - Unify sizing between all pages</issue_title>
<issue_description>The header of the app is not unified, so when switching between home and profile, it seems as though the buttons are moving / incorrectly positioned.</issue_description>

Comments on the Issue (you are @copilot in this section)

@grillinr padding top need to be adjusted to match on all pages maybe safe area view thing? add this to a global theme with reusable font sizes and use rem for values where possible

• Fixes [Design] - Unify sizing between all pages #83

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[Copilot]

Pull request overview

This PR addresses inconsistent header/title sizing across screens by introducing a shared theme constants module and migrating page-title styles (and some icon button sizing) to use those constants, eliminating visible layout shifts when switching tabs.

Changes:

• Added frontend/constants/Theme.ts with rem-based FontSize, LineHeight, Spacing, and IconButton sizing constants.
• Updated MyHeader and multiple screens to use FontSize.pageTitle / LineHeight.pageTitle (and shared icon button sizes) instead of hardcoded values.
• Updated package-lock.json (lockfile metadata changes).

Reviewed changes

Copilot reviewed 11 out of 12 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
frontend/constants/Theme.ts	Introduces global sizing constants (font, line height, spacing, icon button).
frontend/components/header.tsx	Aligns header layout and sizing with the shared theme constants.
frontend/app/(tabs)/profile.tsx	Replaces page title + settings button sizing with theme constants.
frontend/app/(tabs)/explore.tsx	Replaces page title sizing with theme constants.
frontend/app/streams.tsx	Replaces page title sizing with theme constants.
frontend/app/saved-streams.tsx	Replaces page title sizing with theme constants.
frontend/app/saved-library.tsx	Replaces page title sizing with theme constants.
frontend/app/manage-streams.tsx	Replaces page title sizing with theme constants.
frontend/app/archive-bytes.tsx	Replaces page title sizing with theme constants.
frontend/app/user/[username].tsx	Replaces profile title sizing with theme constants.
frontend/app/bytes.tsx	Updates page title sizing with theme constants (but currently introduces a missing-style bug).
frontend/package-lock.json	Lockfile regenerated/metadata updated (adds/removes peer: true flags).

Files not reviewed (1)

• frontend/package-lock.json: Language not supported

Comments suppressed due to low confidence (1)

frontend/package-lock.json:118

• package-lock.json includes widespread changes that appear to be lockfile metadata churn (adding/removing "peer": true flags) without any corresponding package.json changes in this PR. If no dependency update is intended, consider reverting the lockfile changes; otherwise, please confirm the dependency/tooling change that required regenerating the lockfile (and ideally keep it generated by a consistent npm version to avoid future churn).

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

styles.filterRow is still used in the ListHeaderComponent (see around line ~283), but the filterRow style definition was removed from StyleSheet.create. This will cause undefined styles at runtime and a TypeScript error if StyleSheet.NamedStyles typing is enforced. Either restore the filterRow style in the stylesheet or remove/replace the styles.filterRow usage in the render tree.

Suggested change

	},
	},
	filterRow: {
	flexDirection: "row",
	gap: 8,
	paddingTop: 8,
	flexWrap: "wrap",
	},

[elifouts]

Works!