Gesture results overlay the canvas - the page never jumps
Echo thumbnails float centered along the canvas's bottom edge and the empty-state line sits in the same band; both are out of flow, so the widget's height is fixed by the canvas alone whether results come back or not. The strip is pointer-inert except the thumbnails themselves, so drawing near the bottom edge still works. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Y42TyF8Zu7NGRR2893vNcZ
This commit is contained in:
co-authored by
Claude Fable 5
parent
19f8fbaf03
commit
ea7acf4d7d
+17
-3
@@ -647,11 +647,17 @@ textarea:focus {
|
|||||||
touch-action: none;
|
touch-action: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Results overlay the canvas instead of growing the widget - the
|
||||||
|
page never jumps when places arrive (or don't). */
|
||||||
.gesture-echoes {
|
.gesture-echoes {
|
||||||
|
position: absolute;
|
||||||
|
left: 0.6rem;
|
||||||
|
right: 0.6rem;
|
||||||
|
bottom: 0.6rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
gap: 0.5rem;
|
gap: 0.5rem;
|
||||||
margin-top: 0.5rem;
|
pointer-events: none;
|
||||||
min-height: 3rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.gesture-echoes:empty {
|
.gesture-echoes:empty {
|
||||||
@@ -666,6 +672,8 @@ textarea:focus {
|
|||||||
border-radius: 0.4rem;
|
border-radius: 0.4rem;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transition: opacity 0.5s ease;
|
transition: opacity 0.5s ease;
|
||||||
|
pointer-events: auto;
|
||||||
|
box-shadow: 0 0.15rem 0.6rem rgba(0, 0, 0, 0.18);
|
||||||
}
|
}
|
||||||
|
|
||||||
.gesture-echo.shown {
|
.gesture-echo.shown {
|
||||||
@@ -691,9 +699,15 @@ textarea:focus {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.gesture-empty {
|
.gesture-empty {
|
||||||
margin: 0.5rem 0 0;
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0.7rem;
|
||||||
|
margin: 0;
|
||||||
|
text-align: center;
|
||||||
font-size: 0.85rem;
|
font-size: 0.85rem;
|
||||||
color: var(--ink-dim);
|
color: var(--ink-dim);
|
||||||
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.gesture-empty:empty {
|
.gesture-empty:empty {
|
||||||
|
|||||||
Reference in New Issue
Block a user