Andreas Schneider
f602e08b5a
Wrap each DayChip in a container-query context so the chip layout responds to the actual space available rather than the viewport width. Breakpoints (per-chip width): - < 72px (mobile, 7 chips in ~320px): compact — label + date + progress bar + badges only - ≥ 72px (tablet+): show worked duration text below the date number; slightly larger padding/font - ≥ 100px (desktop, 7 chips in ~750px wide main): larger date number, bigger worked label The .chip-slot div in week/+page.svelte is the flex child (flex: 1, min-width: 2.8rem) that feeds width into the container; .chip-wrap inside DayChip carries container-type: inline-size and fills the slot.
sv
Everything you need to build a Svelte project, powered by sv.
Creating a project
If you're seeing this, you've probably already done this step. Congrats!
# create a new project
npx sv create my-app
To recreate this project with the same configuration:
# recreate this project
npx sv@0.15.2 create --template minimal --types ts --install npm web
Developing
Once you've created a project and installed dependencies with npm install (or pnpm install or yarn), start a development server:
npm run dev
# or start the server and open the app in a new browser tab
npm run dev -- --open
Building
To create a production version of your app:
npm run build
You can preview the production build with npm run preview.
To deploy your app, you may need to install an adapter for your target environment.