aljaz/boris
1
1
Fork 0
mirror of https://github.com/dergigi/boris.git synced 2026-01-02 06:24:20 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix: improve mobile touch targets for highlight icons

Browse Source 
- Increase touch target size to 44x44px on mobile (relay & delete icons)
- Add proper padding to both icons for larger tap area
- Increase spacing between relay and delete icons
- Expand quote icon container width on mobile to accommodate both targets
- Increase icon font size on mobile (0.85rem) for better visibility
- Move icons slightly outward (-8px) to prevent overlap

Icons are now much easier to tap on mobile devices without
accidentally hitting the wrong button.
This commit is contained in:
Gigi
2025-10-11 09:06:17 +01:00
parent c85092a644
commit 88f01554e7
1 changed files with 41 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
src/index.css
View File

@@ -2084,13 +2084,19 @@ body.mobile-sidebar-open {
.highlight-relay-indicator {
position: absolute;
bottom: -2px;
left: 0;
bottom: -4px;
left: -6px;
font-size: 0.7rem;
color: #888;
opacity: 0.7;
transition: all 0.2s ease;
cursor: pointer;
padding: 4px;
min-width: 20px;
min-height: 20px;
display: flex;
align-items: center;
justify-content: center;
}
.highlight-relay-indicator:hover {
@@ -2105,13 +2111,19 @@ body.mobile-sidebar-open {
.highlight-delete-btn {
position: absolute;
bottom: -2px;
right: 0;
bottom: -4px;
right: -6px;
font-size: 0.7rem;
color: #888;
opacity: 0.7;
transition: all 0.2s ease;
cursor: pointer;
padding: 4px;
min-width: 20px;
min-height: 20px;
display: flex;
align-items: center;
justify-content: center;
}
.highlight-delete-btn:hover {
@@ -2124,6 +2136,31 @@ body.mobile-sidebar-open {
transform: scale(0.95);
}
/* Mobile: Larger touch targets and better spacing */
@media (max-width: 768px) {
.highlight-quote-icon {
min-width: 100px; /* Ensure enough space for both touch targets */
}
.highlight-relay-indicator {
bottom: -8px;
left: -8px;
padding: 8px;
min-width: var(--min-touch-target);
min-height: var(--min-touch-target);
font-size: 0.85rem;
}
.highlight-delete-btn {
bottom: -8px;
right: -8px;
padding: 8px;
min-width: var(--min-touch-target);
min-height: var(--min-touch-target);
font-size: 0.85rem;
}
}
/* Level-colored quote icon */
.highlight-item.level-mine .highlight-quote-icon {
color: var(--highlight-color-mine, #ffff00);