diff --git a/app/assets/stylesheets/_global.css b/app/assets/stylesheets/_global.css
index 1cfdf362c..b7d38f0fa 100644
--- a/app/assets/stylesheets/_global.css
+++ b/app/assets/stylesheets/_global.css
@@ -31,7 +31,7 @@
/* Components */
--btn-size: 2.65em;
--footer-height: 3.5rem;
- --tray-size: clamp(14rem, 25dvw, 24rem);
+ --tray-size: clamp(12rem, 25dvw, 24rem);
/* Z-index */
--z-events-column-header: 1;
diff --git a/app/assets/stylesheets/trays.css b/app/assets/stylesheets/trays.css
index 77771ac12..1b362d4ec 100644
--- a/app/assets/stylesheets/trays.css
+++ b/app/assets/stylesheets/trays.css
@@ -4,14 +4,14 @@
.tray {
--tray-duration: 350ms;
- --tray-margin: var(--inline-space);
+ --tray-margin: 0.5rem;
--tray-radius: 0.25rem;
--tray-timing-function: cubic-bezier(0.25, 1.25, 0.5, 1);
align-items: end;
- block-size: calc(var(--footer-height) - var(--tray-margin) * 2);
+ block-size: var(--footer-height);
display: grid;
- inset-block: auto var(--tray-margin);
+ inset-block: auto 0;
inline-size: var(--tray-size);
position: fixed;
z-index: var(--z-tray);
@@ -21,6 +21,15 @@
grid-column-start: 1;
grid-row-start: 1;
}
+
+ @media (max-width: 799px) {
+ &:has(.tray__dialog[open]) {
+ background-color: var(--color-terminal-bg);
+ inline-size: calc(100% - var(--tray-margin) * 2);
+ inset-inline-start: var(--tray-margin);
+ z-index: calc(var(--z-tray) + 2);
+ }
+ }
}
/* Dialog
@@ -38,6 +47,7 @@
&:not([open]) {
block-size: var(--footer-height);
+ /* padding-block-end: var(--tray-margin); */
pointer-events: none;
}
@@ -46,7 +56,7 @@
box-shadow:
0 0 0 1px var(--color-ink-lighter),
0 0 16px oklch(var(--lch-black) / 33%);
- inset-block-end: calc(var(--footer-height) - var(--tray-margin));
+ inset-block-end: var(--footer-height);
overflow: hidden;
}
}
@@ -61,13 +71,27 @@
align-self: stretch;
background: transparent;
border: 0;
- margin-block: calc(-1 * var(--tray-margin));
+ display: grid;
+ place-content: center;
z-index: calc(var(--z-tray) + 1);
+ .icon {
+ color: var(--color-canvas);
+ display: none;
+ }
+
.tray__dialog[open] ~ &,
.tray__dialog:not(:has(.tray__item:not(.tray__item--overflow))) ~ & {
display: none;
}
+
+ @media (max-width: 799px) {
+ inline-size: var(--footer-height);
+
+ .icon {
+ display: block;
+ }
+ }
}
.tray__actions {
@@ -132,14 +156,18 @@
.tray__dialog & {
font-size: 10px;
+ margin-block-end: var(--tray-item-margin);
transition: var(--tray-duration) var(--tray-timing-function);
transition-delay: var(--tray-item-delay);
transition-property: margin, scale;
z-index: var(--tray-item-z);
+ &:first-child {
+ --tray-item-margin: var(--tray-margin);
+ }
+
&:not(:first-child) {
scale: var(--tray-item-scale);
- margin-block-end: var(--tray-item-margin);
}
&:nth-child(1) { --tray-item-index: 1; }
@@ -300,6 +328,13 @@
.card__bubble {
display: none;
}
+
+ @media (max-width: 799px) {
+ .tray__expander {
+ border-inline-end: 1px dashed oklch(var(--lch-white) / 50%);
+ translate: calc(-1 * var(--tray-margin)) 0;
+ }
+ }
}
/* Notifications tray
@@ -326,5 +361,22 @@
.card__notification-meta {
font-size: var(--text-x-small);
}
+
+ @media (max-width: 799px) {
+ .tray__expander {
+ border-inline-start: 1px dashed oklch(var(--lch-white) / 50%);
+ translate: var(--tray-margin) 0;
+ }
+ }
+ }
+}
+
+:root {
+ @media (max-width: 799px) {
+ --tray-size: var(--footer-height);
+
+ .tray__dialog:not([open]) .tray__item {
+ opacity: 0;
+ }
}
}
diff --git a/app/views/my/pins/_tray.html.erb b/app/views/my/pins/_tray.html.erb
index 955f34003..615b61e96 100644
--- a/app/views/my/pins/_tray.html.erb
+++ b/app/views/my/pins/_tray.html.erb
@@ -12,5 +12,7 @@
-
+
diff --git a/app/views/notifications/_tray.html.erb b/app/views/notifications/_tray.html.erb
index 03faacab3..3cae87bf1 100644
--- a/app/views/notifications/_tray.html.erb
+++ b/app/views/notifications/_tray.html.erb
@@ -33,5 +33,7 @@
<% end %>
-
+