Skip to content

#514 Make the Applications Page Full Width and Codify Page Container Widths #519

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
b-at-neu merged 1 commit into from
Aug 19, 2026
Merged

#514 Make the Applications Page Full Width and Codify Page Container Widths #519

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 9 additions & 1 deletion .claude/docs/DESIGN.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,15 @@ Any change to a brand/status token must keep ≥4.5:1 contrast against its paire

- **Radius:** `--radius: 0.75rem`. Use `rounded-md`/`rounded-lg`/`rounded-xl` (derived from the scale); don't use arbitrary radii. Inputs/buttons/cards inherit the shadcn defaults.
- **Spacing:** Tailwind 4-point scale. Card padding `p-6` (compact `p-4`); stack gaps `gap-4`/`gap-6`; form field gap `gap-2`. Be consistent rather than pixel-tuning.
- **Containers:** constrain reading width (`max-w-*`), center with `mx-auto`; full-bleed only for tables/dashboards.
- **Page width tiers:** every route inside the app shell picks exactly one tier for its top-level container. `app-shell.tsx` supplies only `p-6`, so the page owns the width.

| Tier | Container classes | Use for |
| -------------- | ------------------- | ----------------------------------------------------------------------------------------------------------------------- |
| **Full-bleed** | none (no `max-w`) | list, table and dashboard pages — `/`, `/positions`, `/users`, `/applications`, `/my-applications`, `/global-questions` |
| **Wide** | `mx-auto max-w-5xl` | two-column review/detail pages — `/applications/[id]`, `/my-applications/[id]` |
| **Narrow** | `mx-auto max-w-2xl` | single-column forms and reading views — `/profile`, `/positions/[id]/apply`, `/positions/[id]/edit` |

There is no fourth tier: `max-w-6xl`/`4xl`/`3xl` on a page container is a bug. Inside a full-bleed page, constraining an individual prose block (`max-w-2xl` on a description) is correct and not a tier violation — see `/positions/[id]`. A route's `loading.tsx` must use the same tier as its `page.tsx`, or the skeleton shifts on resolve. Routes outside the app shell (`(legal)`, `login`) set their own width.

## 5. Components

Expand Down
2 changes: 1 addition & 1 deletion app/(main)/(auth)/applications/loading.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { Skeleton } from '@/components/ui/skeleton';

export default function ApplicationsLoading() {
return (
<div className="mx-auto flex max-w-6xl flex-col gap-6">
<div className="flex flex-col gap-6">
{/* Header skeleton */}
<div className="flex flex-col gap-2">
<Skeleton className="h-7 w-36" />
Expand Down
2 changes: 1 addition & 1 deletion app/(main)/(auth)/applications/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,7 @@ export default async function ApplicationsPage({
: fetchedApplications;

return (
<div className="mx-auto flex max-w-6xl flex-col gap-6">
<div className="flex flex-col gap-6">
<PageHeader
title="Applications"
description="Review and track submitted applications."
Expand Down
Loading