Full document, spreadsheet, slideshow, and diagram tooling
fix: render handle suggestions above input inside modal
Dropdown was rendering below the modal boundary, making suggestions
unclickable (clicks hit the modal backdrop). Now wraps the input in
a positioned container and renders suggestions upward (bottom: 100%)
so they stay within visible area.
+22
-6
+15
-4
src/css/app.css
+15
-4
src/css/app.css
···
1701
1701
position: absolute;
1702
1702
left: 0;
1703
1703
right: 0;
1704
-
top: 100%;
1705
-
z-index: 1000;
1704
+
bottom: 100%;
1705
+
z-index: 1001;
1706
1706
background: var(--color-surface);
1707
1707
border: 1px solid var(--color-border);
1708
1708
border-radius: var(--radius-md);
1709
-
margin-top: 4px;
1709
+
margin-bottom: 4px;
1710
1710
max-height: 280px;
1711
1711
overflow-y: auto;
1712
-
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
1712
+
box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.3);
1713
1713
}
1714
1714
.handle-suggestion {
1715
1715
display: flex;
···
1751
1751
overflow: hidden;
1752
1752
text-overflow: ellipsis;
1753
1753
white-space: nowrap;
1754
+
}
1755
+
1756
+
.username-modal {
1757
+
overflow: visible;
1758
+
}
1759
+
.handle-input-wrapper {
1760
+
position: relative;
1761
+
margin-bottom: var(--space-md);
1762
+
}
1763
+
.handle-input-wrapper .username-input {
1764
+
margin-bottom: 0;
1754
1765
}
1755
1766
1756
1767
.username-modal-actions,
+7
-2
src/landing-events-identity.ts
+7
-2
src/landing-events-identity.ts
···
22
22
}
23
23
24
24
function createSuggestionsDropdown(input: HTMLInputElement): HTMLElement {
25
+
const wrapper = document.createElement('div');
26
+
wrapper.className = 'handle-input-wrapper';
27
+
input.parentElement!.insertBefore(wrapper, input);
28
+
wrapper.appendChild(input);
29
+
25
30
const dropdown = document.createElement('div');
26
31
dropdown.className = 'handle-suggestions';
27
32
dropdown.setAttribute('role', 'listbox');
28
33
dropdown.style.display = 'none';
29
-
input.parentElement!.style.position = 'relative';
30
-
input.insertAdjacentElement('afterend', dropdown);
34
+
wrapper.appendChild(dropdown);
35
+
31
36
input.setAttribute('role', 'combobox');
32
37
input.setAttribute('aria-autocomplete', 'list');
33
38
input.setAttribute('aria-expanded', 'false');