openclaw/oikos
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

fix: compact widget empty states, view transitions for reordering, widget body padding

Browse Source 
- widget__empty: column → row layout, icon 28→20px, padding space-5 → space-3
  saves ~40px vertical space per empty widget on mobile, keeps populated widgets
  visible above the fold
- widget__body: bottom padding space-3 → space-4 for slightly more breathing room
- rebuildList() now uses document.startViewTransition with prefers-reduced-motion
  guard; each customize-row gets a stable view-transition-name for smooth reorder
  animation without a JS animation library

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Ulas Kalayci
2026-04-26 09:03:45 +02:00
parent 777e617b74
commit 3bfda59fc0
3 changed files with 23 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/styles/dashboard.css
+8 -8
View File
@@ -267,25 +267,25 @@
.widget__body {
flex: 1;
padding: var(--space-2) var(--space-4) var(--space-3);
padding: var(--space-2) var(--space-4) var(--space-4);
}
.widget__empty {
padding: var(--space-5) var(--space-4);
text-align: center;
padding: var(--space-3) var(--space-4);
color: var(--color-text-tertiary);
font-size: var(--text-sm);
display: flex;
flex-direction: column;
flex-direction: row;
align-items: center;
gap: var(--space-1);
gap: var(--space-2);
}
.widget__empty .empty-state__icon {
width: 28px;
height: 28px;
width: 20px;
height: 20px;
flex-shrink: 0;
color: var(--color-text-tertiary);
margin-bottom: var(--space-1);
opacity: 0.6;
}
/* Widget hover lift (desktop) */