feat(quick-260916-bwo): Abstaende halbiert — Seitenrahmen p-3 (alle Seiten), Dashboard p-2, Grid 8 px, Widget-Innenabstaende
- app-shell.tsx: main p-3 (12 px statt 24) — gilt fuer alle Seiten, Nachtrag des Users - page.tsx: Container relative p-2, Umschalter right-2 top-2; mt-8 bleibt (Umschalter 36 px hoch, sonst Ueberlappung) - link/favorites p-1, calendar p-1.5 (Zustandsansichten p-2), search px-1.5, note-Kopfzeile px-1.5 - Grid-Abstand 8 px bereits in Task 1, Uhr/Stoppuhr/Rechner-Innenabstaende bereits in 2a Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_018N9CD3ebPKm1b32bPpBknY
This commit is contained in:
@@ -66,16 +66,20 @@ export default function DashboardPage() {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="relative p-4">
|
||||
<div className="relative p-2">
|
||||
{/* Edit mode toggle — top right */}
|
||||
<div className="absolute right-4 top-4 z-10">
|
||||
<div className="absolute right-2 top-2 z-10">
|
||||
<EditModeToggle
|
||||
isEditMode={isEditMode}
|
||||
onToggle={() => setEditMode(!isEditMode)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Dashboard grid */}
|
||||
{/* Dashboard grid.
|
||||
quick-260916-bwo: mt-8 bleibt bewusst — der Umschalter ist 36 px hoch
|
||||
(p-2 plus 20-px-Symbol) und liegt mit top-2 bei 8..44 px; das erste
|
||||
Widget beginnt mit mt-8 bei 8+32+8 = 48 px (4 px Abstand). Eine
|
||||
Halbierung auf mt-4 legte es bei 32 px mitten in den Umschalter. */}
|
||||
<div className="mt-8">
|
||||
<DashboardGrid
|
||||
layouts={layouts}
|
||||
|
||||
@@ -77,7 +77,7 @@ export function CalendarWidget({ config }: WidgetProps) {
|
||||
// Loading state
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="flex h-full items-center justify-center p-4">
|
||||
<div className="flex h-full items-center justify-center p-2">
|
||||
<span className="text-sm text-muted-foreground">
|
||||
{t('calendar.loading')}
|
||||
</span>
|
||||
@@ -88,7 +88,7 @@ export function CalendarWidget({ config }: WidgetProps) {
|
||||
// No sources configured
|
||||
if (hasSources === false) {
|
||||
return (
|
||||
<div className="flex h-full items-center justify-center p-4">
|
||||
<div className="flex h-full items-center justify-center p-2">
|
||||
<span className="text-sm text-muted-foreground">
|
||||
{t('calendar.emptyNoSources')}
|
||||
</span>
|
||||
@@ -99,7 +99,7 @@ export function CalendarWidget({ config }: WidgetProps) {
|
||||
// Sources exist but no events
|
||||
if (events.length === 0) {
|
||||
return (
|
||||
<div className="flex h-full items-center justify-center p-4">
|
||||
<div className="flex h-full items-center justify-center p-2">
|
||||
<span className="text-sm text-muted-foreground">
|
||||
{t('calendar.emptyNoEvents')}
|
||||
</span>
|
||||
@@ -109,7 +109,7 @@ export function CalendarWidget({ config }: WidgetProps) {
|
||||
|
||||
// Events list
|
||||
return (
|
||||
<div className="flex h-full flex-col overflow-y-auto p-3">
|
||||
<div className="flex h-full flex-col overflow-y-auto p-1.5">
|
||||
<ul className="space-y-2">
|
||||
{events.map((event) => (
|
||||
<li
|
||||
|
||||
@@ -171,7 +171,7 @@ export function FavoritesWidget({
|
||||
|
||||
// --- Render ---
|
||||
return (
|
||||
<div className="flex flex-col h-full overflow-auto p-2 gap-2">
|
||||
<div className="flex flex-col h-full overflow-auto p-1 gap-2">
|
||||
{/* View mode toggle (edit mode only) */}
|
||||
{isEditMode && (
|
||||
<div className="flex gap-1 widgetNoDrag" aria-label={t('favorites.name')}>
|
||||
|
||||
@@ -235,7 +235,7 @@ export function LinkWidget({
|
||||
|
||||
// --- Render ---
|
||||
return (
|
||||
<div className="flex flex-col h-full overflow-auto p-2 gap-2">
|
||||
<div className="flex flex-col h-full overflow-auto p-1 gap-2">
|
||||
{/* View mode toggle (edit mode only) */}
|
||||
{isEditMode && (
|
||||
<div className="flex gap-1 widgetNoDrag">
|
||||
|
||||
@@ -86,7 +86,7 @@ export function NoteWidget({ instanceId, config }: WidgetProps) {
|
||||
return (
|
||||
<div className="flex h-full flex-col overflow-hidden" data-color-mode="auto">
|
||||
{/* Header: title + pencil toggle */}
|
||||
<div className="relative flex items-center border-b border-border px-3 py-1.5 gap-2">
|
||||
<div className="relative flex items-center border-b border-border px-1.5 py-1.5 gap-2">
|
||||
<input
|
||||
type="text"
|
||||
className="flex-1 bg-transparent text-sm font-semibold text-foreground outline-none placeholder:text-muted-foreground"
|
||||
|
||||
@@ -86,7 +86,7 @@ export function SearchWidget({ instanceId, config }: WidgetProps) {
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="flex h-full items-center gap-2 px-3">
|
||||
<div className="flex h-full items-center gap-2 px-1.5">
|
||||
{/* Provider dropdown (D-14: ~120px left) */}
|
||||
<select
|
||||
role="combobox"
|
||||
|
||||
@@ -30,8 +30,9 @@ export function AppShell({ children }: { children: React.ReactNode }) {
|
||||
<div className="min-h-screen bg-background">
|
||||
<Header />
|
||||
<Sidebar />
|
||||
{/* Seitenrahmen seit quick-260916-bwo halbiert: p-3 (12 px) statt vorher 24 px (Stufe 6), gilt fuer alle Seiten. */}
|
||||
<main
|
||||
className="app-shell-main min-h-[calc(100vh-var(--header-height))] transition-all duration-200 p-6"
|
||||
className="app-shell-main min-h-[calc(100vh-var(--header-height))] transition-all duration-200 p-3"
|
||||
style={mounted ? { '--current-sidebar-width': sidebarWidth } as React.CSSProperties : undefined}
|
||||
>
|
||||
{children}
|
||||
|
||||
Reference in New Issue
Block a user