fix(ui): avoid Monaco overlay dimming on phone
This commit is contained in:
@@ -1631,23 +1631,6 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
|
|||||||
<Show when={isPhoneLayout()}>
|
<Show when={isPhoneLayout()}>
|
||||||
<Show when={changesListOpen()}>
|
<Show when={changesListOpen()}>
|
||||||
<div class="file-list-overlay" role="dialog" aria-label="Changes">
|
<div class="file-list-overlay" role="dialog" aria-label="Changes">
|
||||||
<div class="file-list-overlay-header">
|
|
||||||
<span class="files-tab-selected-path" title={selectedFileData?.file || ""}>
|
|
||||||
{selectedFileData?.file || ""}
|
|
||||||
</span>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
class="files-toggle-button"
|
|
||||||
onClick={() => {
|
|
||||||
setChangesListTouched(true)
|
|
||||||
setChangesListOpen(false)
|
|
||||||
persistListOpen("changes", false)
|
|
||||||
}}
|
|
||||||
aria-label="Close files"
|
|
||||||
>
|
|
||||||
Close
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div class="file-list-scroll">
|
<div class="file-list-scroll">
|
||||||
<For each={sorted}>
|
<For each={sorted}>
|
||||||
{(item) => (
|
{(item) => (
|
||||||
@@ -1881,23 +1864,6 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
|
|||||||
<Show when={isPhoneLayout()}>
|
<Show when={isPhoneLayout()}>
|
||||||
<Show when={filesListOpen()}>
|
<Show when={filesListOpen()}>
|
||||||
<div class="file-list-overlay" role="dialog" aria-label="Files">
|
<div class="file-list-overlay" role="dialog" aria-label="Files">
|
||||||
<div class="file-list-overlay-header">
|
|
||||||
<span class="files-tab-selected-path" title={browserPath()}>
|
|
||||||
{browserPath()}
|
|
||||||
</span>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
class="files-toggle-button"
|
|
||||||
onClick={() => {
|
|
||||||
setFilesListTouched(true)
|
|
||||||
setFilesListOpen(false)
|
|
||||||
persistListOpen("files", false)
|
|
||||||
}}
|
|
||||||
aria-label="Close files"
|
|
||||||
>
|
|
||||||
Close
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div class="file-list-scroll">
|
<div class="file-list-scroll">
|
||||||
<Show when={parent}>
|
<Show when={parent}>
|
||||||
{(p) => (
|
{(p) => (
|
||||||
|
|||||||
@@ -117,6 +117,7 @@
|
|||||||
.files-tab-body {
|
.files-tab-body {
|
||||||
@apply flex flex-col flex-1 min-h-0;
|
@apply flex flex-col flex-1 min-h-0;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
isolation: isolate;
|
||||||
}
|
}
|
||||||
|
|
||||||
.file-list-overlay {
|
.file-list-overlay {
|
||||||
@@ -126,16 +127,11 @@
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
background-color: var(--surface-secondary);
|
background-color: var(--surface-secondary);
|
||||||
border-left: 1px solid var(--border-base);
|
border-left: 1px solid var(--border-base);
|
||||||
z-index: 5;
|
/* Monaco uses layered positioned elements; keep overlay well above it. */
|
||||||
|
z-index: 200;
|
||||||
}
|
}
|
||||||
|
|
||||||
.file-list-overlay-header {
|
/* Phone overlay: header removed; use main header toggle. */
|
||||||
@apply flex items-center justify-between gap-2 px-3 py-2 border-b;
|
|
||||||
border-color: var(--border-base);
|
|
||||||
background-color: var(--surface-secondary);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Overlay title intentionally unused; header shows current path instead. */
|
|
||||||
|
|
||||||
.files-tab-stats {
|
.files-tab-stats {
|
||||||
@apply flex items-center gap-3 text-[11px];
|
@apply flex items-center gap-3 text-[11px];
|
||||||
|
|||||||
Reference in New Issue
Block a user