feat(ui): one-click display-mode buttons in the app-session bar (desktop)
Replace the display-mode dropdown with three inline buttons (right panel / over whole app / fullscreen) so switching iframe modes is a single click. Active mode is highlighted orange. Mobile keeps its own bar untouched. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
@@ -546,35 +546,14 @@ onBeforeUnmount(() => {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
/* Mode dropdown */
|
||||
.mode-option {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
padding: 10px 14px;
|
||||
font-size: 13px;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
transition: all 0.15s ease;
|
||||
text-align: left;
|
||||
}
|
||||
.mode-option:hover {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
color: white;
|
||||
}
|
||||
.mode-option-active {
|
||||
/* Active display-mode button in the header bar */
|
||||
.app-session-btn-active {
|
||||
color: #fb923c;
|
||||
background: rgba(251, 146, 60, 0.08);
|
||||
background: rgba(251, 146, 60, 0.12);
|
||||
}
|
||||
|
||||
.menu-fade-enter-active,
|
||||
.menu-fade-leave-active {
|
||||
transition: opacity 0.15s ease, transform 0.15s ease;
|
||||
}
|
||||
.menu-fade-enter-from,
|
||||
.menu-fade-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(-4px);
|
||||
.app-session-btn-active:hover {
|
||||
color: #fb923c;
|
||||
background: rgba(251, 146, 60, 0.18);
|
||||
}
|
||||
|
||||
.content-fade-enter-active,
|
||||
|
||||
Reference in New Issue
Block a user