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

1
src/styles/map.css
View File

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

37
src/styles/smartSearchBar.css
View File

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