feat(ui): make workspace layout responsive for narrow and mobile screens
Widen the assistant panel via a shared CSS variable, overlay it below 1180px, and add mobile breakpoints for the topbar, canvas controls, toolbar, minimap, and bottom-sheet assistant panel. Use dvh units and safe-area insets for mobile viewports. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
+222
-12
@@ -28,6 +28,7 @@
|
||||
--blue: #2563eb;
|
||||
--blue-soft: #dbeafe;
|
||||
--black: #050505;
|
||||
--assistant-panel-width: 600px;
|
||||
--shadow-sm: 0 2px 8px rgba(17, 24, 39, 0.06);
|
||||
--shadow-md: 0 12px 30px rgba(17, 24, 39, 0.08);
|
||||
}
|
||||
@@ -1167,6 +1168,12 @@ button:disabled {
|
||||
background: #f7f7f4;
|
||||
}
|
||||
|
||||
@supports (height: 100dvh) {
|
||||
.workspace-shell {
|
||||
height: 100dvh;
|
||||
}
|
||||
}
|
||||
|
||||
.workspace-topbar {
|
||||
position: fixed;
|
||||
inset: 0 0 auto;
|
||||
@@ -1269,11 +1276,20 @@ button:disabled {
|
||||
}
|
||||
|
||||
.workspace-main {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: calc(100vh - 48px);
|
||||
margin-top: 48px;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) 400px;
|
||||
grid-template-columns: minmax(0, 1fr) minmax(0, var(--assistant-panel-width));
|
||||
}
|
||||
|
||||
@supports (height: 100dvh) {
|
||||
.workspace-main {
|
||||
height: calc(100dvh - 48px);
|
||||
}
|
||||
}
|
||||
|
||||
.assistant-panel-collapsed .workspace-main {
|
||||
@@ -1524,6 +1540,7 @@ button:disabled {
|
||||
overflow: hidden;
|
||||
background: var(--canvas-background, #f7f7f4);
|
||||
cursor: default;
|
||||
touch-action: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
@@ -3369,8 +3386,8 @@ button:disabled {
|
||||
|
||||
.assistant-panel {
|
||||
position: relative;
|
||||
width: 400px;
|
||||
max-width: 400px;
|
||||
width: var(--assistant-panel-width);
|
||||
max-width: var(--assistant-panel-width);
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
@@ -3726,6 +3743,23 @@ button:disabled {
|
||||
width: 348px;
|
||||
}
|
||||
|
||||
@media (max-width: 1180px) {
|
||||
.workspace-main {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.assistant-panel {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 48;
|
||||
width: min(var(--assistant-panel-width), calc(100vw - 16px));
|
||||
max-width: calc(100vw - 16px);
|
||||
box-shadow: -16px 0 40px rgba(17, 24, 39, 0.12);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 980px) {
|
||||
.home-main {
|
||||
width: min(100% - 32px, 760px);
|
||||
@@ -3746,14 +3780,6 @@ button:disabled {
|
||||
min-height: 300px;
|
||||
}
|
||||
|
||||
.workspace-main {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.assistant-panel {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.promo-strip {
|
||||
display: none;
|
||||
}
|
||||
@@ -3803,10 +3829,194 @@ button:disabled {
|
||||
}
|
||||
|
||||
.workspace-topbar {
|
||||
grid-template-columns: 1fr auto;
|
||||
justify-content: flex-start;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.workspace-countdown {
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.workspace-countdown > span {
|
||||
min-width: 18px;
|
||||
height: 22px;
|
||||
border-radius: 7px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.workspace-countdown div {
|
||||
min-width: 0;
|
||||
margin-left: 6px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.workspace-countdown b {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.workspace-actions .text-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.workspace-stage-title {
|
||||
left: 6px;
|
||||
right: 132px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.canvas-open-account-controls {
|
||||
right: 8px;
|
||||
}
|
||||
|
||||
.canvas-collapsed-controls {
|
||||
top: 6px;
|
||||
right: 6px;
|
||||
}
|
||||
|
||||
.workspace-title-name strong {
|
||||
max-width: min(126px, 36vw);
|
||||
}
|
||||
|
||||
.workspace-title-edit {
|
||||
width: min(170px, 46vw);
|
||||
}
|
||||
|
||||
.assistant-panel {
|
||||
top: auto;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
max-width: none;
|
||||
height: min(72vh, calc(100% - 8px));
|
||||
border-top: 1px solid #eceff3;
|
||||
border-left: 0;
|
||||
border-radius: 18px 18px 0 0;
|
||||
box-shadow: 0 -18px 42px rgba(17, 24, 39, 0.14);
|
||||
padding-bottom: max(8px, env(safe-area-inset-bottom));
|
||||
}
|
||||
|
||||
.assistant-header {
|
||||
flex: 0 0 44px;
|
||||
min-height: 44px;
|
||||
}
|
||||
|
||||
.assistant-header-title {
|
||||
height: 44px;
|
||||
padding-left: 14px;
|
||||
}
|
||||
|
||||
.assistant-header-title strong {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.assistant-header-actions {
|
||||
gap: 4px;
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
||||
.assistant-feed {
|
||||
max-width: none;
|
||||
gap: 22px;
|
||||
padding: 14px 12px 28px;
|
||||
}
|
||||
|
||||
.assistant-scroll-to-end button {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
.canvas-layer-panel {
|
||||
width: min(var(--layer-panel-width), calc(100vw - 32px));
|
||||
max-width: calc(100vw - 32px);
|
||||
}
|
||||
|
||||
.canvas-generated-files-panel {
|
||||
width: min(var(--generated-files-panel-width), calc(100vw - 24px));
|
||||
max-width: calc(100vw - 24px);
|
||||
}
|
||||
|
||||
.canvas-bottom-left,
|
||||
.canvas-bottom-left.is-offset-by-files-panel,
|
||||
.canvas-bottom-left.is-offset-by-layers-panel {
|
||||
left: 8px;
|
||||
right: 8px;
|
||||
bottom: calc(62px + env(safe-area-inset-bottom));
|
||||
}
|
||||
|
||||
.canvas-statusbar {
|
||||
max-width: calc(100vw - 16px);
|
||||
overflow-x: auto;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
.canvas-statusbar::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.canvas-minimap {
|
||||
width: min(220px, calc(100vw - 16px));
|
||||
height: 136px;
|
||||
border-radius: 14px;
|
||||
}
|
||||
|
||||
.workspace-toolbar,
|
||||
.workspace-toolbar.is-offset-by-files-panel,
|
||||
.workspace-toolbar.is-offset-by-layers-panel {
|
||||
left: 8px;
|
||||
right: 8px;
|
||||
bottom: calc(10px + env(safe-area-inset-bottom));
|
||||
width: auto;
|
||||
max-width: none;
|
||||
justify-content: flex-start;
|
||||
overflow-x: auto;
|
||||
transform: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
.workspace-toolbar::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.workspace-toolbar button {
|
||||
flex: 0 0 32px;
|
||||
}
|
||||
|
||||
.workspace-toolbar-separator {
|
||||
flex: 0 0 1px;
|
||||
}
|
||||
|
||||
.pen-tool-controls,
|
||||
.pen-tool-controls.is-offset-by-files-panel,
|
||||
.pen-tool-controls.is-offset-by-layers-panel {
|
||||
left: 8px;
|
||||
right: 8px;
|
||||
bottom: calc(62px + env(safe-area-inset-bottom));
|
||||
max-width: none;
|
||||
overflow-x: auto;
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.workspace-countdown div {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.workspace-stage-title {
|
||||
right: 106px;
|
||||
}
|
||||
|
||||
.canvas-conversation-button {
|
||||
min-width: 46px;
|
||||
padding: 0 8px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.canvas-collapsed-credit {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user