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;
|
||||
}
|
||||
|
||||
/* Results overlay the canvas instead of growing the widget - the
|
||||
page never jumps when places arrive (or don't). */
|
||||
.gesture-echoes {
|
||||
position: absolute;
|
||||
left: 0.6rem;
|
||||
right: 0.6rem;
|
||||
bottom: 0.6rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
margin-top: 0.5rem;
|
||||
min-height: 3rem;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.gesture-echoes:empty {
|
||||
@@ -666,6 +672,8 @@ textarea:focus {
|
||||
border-radius: 0.4rem;
|
||||
opacity: 0;
|
||||
transition: opacity 0.5s ease;
|
||||
pointer-events: auto;
|
||||
box-shadow: 0 0.15rem 0.6rem rgba(0, 0, 0, 0.18);
|
||||
}
|
||||
|
||||
.gesture-echo.shown {
|
||||
@@ -691,9 +699,15 @@ textarea:focus {
|
||||
}
|
||||
|
||||
.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;
|
||||
color: var(--ink-dim);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.gesture-empty:empty {
|
||||
|
||||
Reference in New Issue
Block a user