canastack-admin
/
sw-fe
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: tighten search bar layout

This commit is contained in:
Your Name 2025-12-28 23:48:41 -05:00
parent 972ba1afe5
commit a9bc4d02e6
3 changed files with 37 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/Map/MapView.jsx
View File

@ -82,7 +82,7 @@ export default function MapView({
const openOverlayWhenReady = useCallback( const openOverlayWhenReady = useCallback(
(post, opts = {}) => { (post, opts = {}) => {
if (!post?.id) return; if (!post) return;
const { fullScreen = false } = opts; const { fullScreen = false } = opts;
const tryOpen = () => { const tryOpen = () => {
const map = mapRef.current; const map = mapRef.current;
@ -632,7 +632,8 @@ export default function MapView({
const postId = Number(raw?.post_id ?? raw?.id ?? item?.id ?? 0); const postId = Number(raw?.post_id ?? raw?.id ?? item?.id ?? 0);
const rawUrl = raw?.url || item?.url || ""; const rawUrl = raw?.url || item?.url || "";
if (Number.isFinite(postId) && postId > 0) { if (Number.isFinite(postId) && postId > 0) {
setForceFullPostId(postId); pendingOpenPostIdRef.current = postId;
pendingOpenFullRef.current = false;
} }
const focusPost = (post) => { const focusPost = (post) => {

1
src/styles/map.css
View File

@ -14,6 +14,7 @@
position:relative; position:relative;
width:100%; width:100%;
height: clamp(520px, 72vh, 860px); height: clamp(520px, 72vh, 860px);
overflow: hidden;
} }
/* Landscape: vh is small, reduce min height */ /* Landscape: vh is small, reduce min height */

37
src/styles/smartSearchBar.css
View File

@ -2,14 +2,19 @@
.sw-search { .sw-search {
position: relative; position: relative;
width: 100%; width: min(580px, 100%);
max-width: 560px; max-width: 580px;
flex: 1 1 auto;
min-width: 0;
} }
.sw-search-row{ .sw-search-row{
display: flex; display: flex;
align-items: center; align-items: stretch;
gap: 10px; gap: 4px;
width: 100%;
min-width: 0;
flex-wrap: nowrap;
} }
.sw-search__side{ .sw-search__side{
@ -21,6 +26,7 @@
background: var(--sw-panel-bg, rgba(15, 18, 28, 0.62)); background: var(--sw-panel-bg, rgba(15, 18, 28, 0.62));
border: 1px solid var(--sw-panel-border, rgba(255, 255, 255, 0.10)); border: 1px solid var(--sw-panel-border, rgba(255, 255, 255, 0.10));
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
flex-shrink: 0;
} }
.sw-search__bar { .sw-search__bar {
@ -28,6 +34,9 @@
display: flex; display: flex;
align-items: center; align-items: center;
gap: 8px; gap: 8px;
width: 100%;
box-sizing: border-box;
min-width: 0;
border-radius: 14px; border-radius: 14px;
padding: 8px 10px; padding: 8px 10px;
@ -37,6 +46,20 @@
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
} }
.sw-search__bar{
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
.sw-search__side{
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
box-shadow: inset 1px 0 0 rgba(255,255,255,0.08);
}
.sw-search__bar{
border-right: 1px solid rgba(255,255,255,0.18);
}
.sw-search__input { .sw-search__input {
flex: 1; flex: 1;
border: 0; border: 0;
@ -77,6 +100,12 @@
display: flex; display: flex;
align-items: center; align-items: center;
gap: 6px; gap: 6px;
flex-shrink: 0;
margin-left: -6px;
}
.sw-search__icons .sw-search__iconBtn:first-child{
margin-left: -2px;
} }
.sw-search__iconBtn { .sw-search__iconBtn {