Files
tolaria/src/App.css
Test af7d79fe44 fix: enforce min-width per column with cascade shrink on window resize
Editor (400px), note list (220px), sidebar (180px), and inspector
(240px) now have CSS min-width constraints. Window minWidth set to
800px in Tauri config. Flex-shrink ratios create cascade order:
editor shrinks first, then note list, then sidebar.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-30 09:29:57 +02:00

77 lines
1.3 KiB
CSS

/* App layout - minimal CSS, most styling via Tailwind */
.app-shell {
display: flex;
flex-direction: column;
height: 100vh;
width: 100vw;
overflow: hidden;
box-shadow: inset 0 0 0 1px var(--border-primary);
}
.app {
display: flex;
flex: 1;
min-height: 0;
overflow: hidden;
}
.app__sidebar {
flex-shrink: 1;
min-width: 180px;
display: flex;
flex-direction: column;
}
.app__sidebar > * {
flex: 1;
}
.app__note-list {
flex-shrink: 10;
min-width: 220px;
display: flex;
flex-direction: column;
}
.app__note-list > * {
flex: 1;
}
.app__editor {
flex: 1;
min-width: 400px;
min-height: 0;
overflow: hidden;
display: flex;
flex-direction: column;
}
.app__editor > * {
flex: 1;
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes tab-status-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.3; }
}
.tab-status-pulse {
animation: tab-status-pulse 1.2s ease-in-out infinite;
}
/* AI highlight animation — applied by useAiActivity when MCP calls ui_highlight */
@keyframes ai-highlight-glow {
0% { box-shadow: inset 0 0 0 2px rgba(99, 102, 241, 0.8); }
50% { box-shadow: inset 0 0 8px 2px rgba(99, 102, 241, 0.4); }
100% { box-shadow: inset 0 0 0 2px rgba(99, 102, 241, 0); }
}
.ai-highlight {
animation: ai-highlight-glow 0.8s ease-out;
}