diff --git a/packages/theme/styles/common.scss b/packages/theme/styles/common.scss
index 0eac052b97..315ad0567e 100644
--- a/packages/theme/styles/common.scss
+++ b/packages/theme/styles/common.scss
@@ -41,11 +41,13 @@
&.border-right { border-right: 1px solid var(--divider-color); }
}
.antiPanel-navigator {
+ position: relative;
min-width: 18rem;
max-width: 18rem;
width: 18rem;
-
- &.float {
+}
+@media (max-width: 1024px) {
+ .antiPanel-navigator {
position: fixed;
top: var(--status-bar-height);
left: var(--app-panel-width);
diff --git a/packages/theme/styles/panel.scss b/packages/theme/styles/panel.scss
index a252d72791..3853e05182 100644
--- a/packages/theme/styles/panel.scss
+++ b/packages/theme/styles/panel.scss
@@ -180,11 +180,13 @@
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
transition: box-shadow 150ms ease 0s, transform 150ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
transform: translateX(0);
+ visibility: hidden;
&::before { content: none; }
&.shown {
box-shadow: var(--popup-aside-shadow);
transform: translateX(-100%);
+ visibility: visible;
&::after {
position: absolute;
diff --git a/packages/ui/src/components/Panel.svelte b/packages/ui/src/components/Panel.svelte
index 0b852a93de..31d41a658d 100644
--- a/packages/ui/src/components/Panel.svelte
+++ b/packages/ui/src/components/Panel.svelte
@@ -13,7 +13,7 @@
// limitations under the License.
-->
-