style: cleanup tailwind

Author: tyler-dane

AGENTS.md

@@ -87,6 +87,10 @@ Use a single-context domain-doc layout. See `.agents/config/domain.md`.
   and `user-event`; avoid CSS selectors and `data-*` locators.
 - New web styles should use Tailwind semantic colors from
   `packages/web/src/index.css`, not raw colors like `bg-blue-300`.
+- Prefer canonical Tailwind scale utilities over arbitrary values when an
+  equivalent exists. Treat VS Code Tailwind IntelliSense
+  `suggestCanonicalClasses` warnings as actionable cleanup before finishing
+  changes.
 - Do not test login flows without the required backend setup.
 - Keep React components in their own files.
 - Do not add or use barrel files such as `index.ts` / `index.tsx`. Import from

packages/web/src/views/Life/LifeView.tsx

@@ -77,7 +77,7 @@ function ZoomControls({
           -
         </span>
       </ZoomButton>
-      <span className="min-w-[80px] text-center font-medium text-sm text-text-light">
+      <span className="min-w-20 text-center font-medium text-sm text-text-light">
         {Math.round(zoom * 100)}%
       </span>
       <ZoomButton
@@ -335,7 +335,7 @@ export function LifeView({ enableDotTooltips = true, today }: LifeViewProps) {
               style={{ transform: `scale(${effectiveScale})` }}
             >
               <div
-                className="grid gap-[2px]"
+                className="grid gap-0.5"
                 data-total-dots={totalDots}
                 style={{
                   gridTemplateColumns: `repeat(${columns}, ${DOT_SIZE}px)`,