Reduce repeated inline layout styles

[maniczko]

Summary

• Reduced repeated static inline layout styles by introducing named workspace layout utility classes.
• Converted story-cluster-card list/story anatomy to classes; only the external style prop remains.
• Replaced repeated wrap/stack rows in source and settings surfaces.
• Documented the layout utility policy in docs/ui-system.md.

Inline style count

• Baseline observed on issue branch from current main: 131 occurrences of style={ in apps/web/app/**/*.tsx.
• After: 108 occurrences.

Validation

• npm ci
• rg -n 'style=\{' apps/web/app -g '*.tsx'
• npm run build
• npm run test:unit:web
• RSSMASTER_PLAYWRIGHT_MODULE=C:\Users\user\Desktop\RSSmaster\output\playwright-runtime\node_modules\playwright npm run check:layout

Evidence

• Layout smoke report: output/playwright/layout-qa.json

Closes #13

[gemini-code-assist]

Code Review

This pull request refactors the styling of several components, including StoryClusterCard, WorkspaceSettingsSection, and WorkspaceSourcesSection, by replacing inline styles with a new set of standardized CSS utility classes defined in base.css. The documentation has been updated to include these new layout utilities. Feedback identifies a potential hydration mismatch in StoryClusterCard caused by using new Date() in the render path and recommends removing redundant font-family declarations from the new CSS classes to improve maintainability.

[gemini-code-assist]

Using new Date() directly within the render path can cause hydration mismatches in Next.js/React, as the server-rendered timestamp may differ from the client-side one. Consider using a stable reference or a hook that handles time-dependent rendering only after hydration. This issue also appears on line 158.

[gemini-code-assist]

The font-family property is redundant here because it is already defined globally on the :root and body elements (lines 30 and 47). Removing it from this and other text utility classes (.workspace-text-body, .workspace-text-caption) will keep the CSS more concise and maintainable.

Suggested change

	font-family: "Aptos", "Segoe UI Variable", "Segoe UI", sans-serif;
	font-size: 1.06rem;

[gemini-code-assist]

Redundant font-family property. It is already inherited from the global styles.

Suggested change

	font-family: "Aptos", "Segoe UI Variable", "Segoe UI", sans-serif;
	font-size: 0.9rem;

[gemini-code-assist]

Redundant font-family property. It is already inherited from the global styles.

Suggested change

	font-family: "Aptos", "Segoe UI Variable", "Segoe UI", sans-serif;
	font-size: 0.81rem;