Antigravity/notes-qpid-pro
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(reader): keep word translation popup as compact block on desktop without full-width stretch

Browse Source
This commit is contained in:
Antigravity
2026-10-08 11:46:44 +03:00
parent f10965eff5
commit e1cacde543
6 changed files with 86 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/static/css/components.css
+11
View File
@@ -40,6 +40,17 @@
}
}
@keyframes slideUpSheet {
from {
transform: translateY(100%);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
.auth-header,
.login-header {
text-align: center;
app/static/css/dictionary.css
-50
View File
@@ -757,56 +757,6 @@
}
/* 7. Bottom Sheet for Word Translation Popup on Mobile */
.reader-word-popup {
position: fixed !important;
top: auto !important;
bottom: calc(58px + env(safe-area-inset-bottom, 0px)) !important;
left: 8px !important;
right: 8px !important;
width: auto !important;
max-width: none !important;
border-radius: 18px !important;
box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.5) !important;
border: 1px solid var(--border-focus) !important;
background-color: var(--bg-surface) !important;
z-index: 10005 !important;
padding: 14px 16px !important;
animation: slideUpSheet 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.reader-settings-panel {
position: fixed !important;
top: auto !important;
bottom: calc(58px + env(safe-area-inset-bottom, 0px)) !important;
left: 8px !important;
right: 8px !important;
width: auto !important;
max-height: calc(85dvh - 60px) !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch !important;
border-radius: 20px !important;
box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.55) !important;
border: 1px solid var(--border-focus) !important;
background-color: var(--bg-surface) !important;
color: var(--text-main) !important;
padding: 16px 18px 24px !important;
z-index: 10006 !important;
animation: slideUpSheet 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
@keyframes slideUpSheet {
from {
transform: translateY(100%);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
/* --- Responsive Mobile Overrides (max-width: 768px) --- */
@media (max-width: 768px) {
/* 4. Dictionary & Search */
app/static/css/reader.css
+55 -3
View File
@@ -1549,9 +1549,11 @@
background-color: var(--bg-surface);
border: 1px solid var(--border-focus);
border-radius: var(--radius-lg);
box-shadow: 0 12px 24px -4px rgba(0, 0, 0, 0.5);
width: 320px;
max-width: calc(100vw - 32px);
box-shadow: 0 12px 28px -4px rgba(0, 0, 0, 0.55);
width: 340px;
max-width: 360px;
max-height: calc(100vh - 40px);
overflow-y: auto;
padding: 16px;
animation: fadeInScale 0.15s ease-out;
}
@@ -2061,6 +2063,56 @@
font-size: 17px;
line-height: 1.65;
}
/* Mobile Bottom Sheet for Word Translation Popup */
.reader-word-popup {
position: fixed !important;
top: auto !important;
bottom: calc(58px + env(safe-area-inset-bottom, 0px)) !important;
left: 8px !important;
right: 8px !important;
width: auto !important;
max-width: none !important;
max-height: calc(85dvh - 60px) !important;
overflow-y: auto !important;
border-radius: 18px !important;
box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.5) !important;
border: 1px solid var(--border-focus) !important;
background-color: var(--bg-surface) !important;
z-index: 10005 !important;
padding: 14px 16px !important;
animation: slideUpSheet 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
body.zen-mode-active .reader-word-popup {
bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
}
/* Mobile Bottom Sheet for Reader Settings */
.reader-settings-panel {
position: fixed !important;
top: auto !important;
bottom: calc(58px + env(safe-area-inset-bottom, 0px)) !important;
left: 8px !important;
right: 8px !important;
width: auto !important;
max-width: none !important;
max-height: calc(85dvh - 60px) !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch !important;
border-radius: 20px !important;
box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.55) !important;
border: 1px solid var(--border-focus) !important;
background-color: var(--bg-surface) !important;
color: var(--text-main) !important;
padding: 16px 18px 24px !important;
z-index: 10006 !important;
animation: slideUpSheet 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
body.zen-mode-active .reader-settings-panel {
bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
}
}
/* ==========================================================================