Guard against missing search elements and restyle search layout

This commit is contained in:
Bruno Charest 2026-05-26 14:05:26 -04:00
parent 8fdcdaf412
commit f2170e9ac8
2 changed files with 20 additions and 19 deletions

View File

@ -4682,6 +4682,7 @@
function initSearch() {
const input = document.getElementById("search-input");
if (!input) return;
const caseBtn = document.getElementById("search-case-btn");
const wordBtn = document.getElementById("search-word-btn");
const regexBtn = document.getElementById("search-regex-btn");
@ -4770,7 +4771,7 @@
SearchChips.init();
// Initially hide clear button
clearBtn.style.display = "none";
if (clearBtn) clearBtn.style.display = "none";
// --- Input handler: debounced search + autocomplete dropdown ---
input.addEventListener("input", () => {

View File

@ -243,17 +243,17 @@ a:hover {
.search-wrapper {
width: 100%;
max-width: 520px;
max-width: 620px;
position: relative;
display: flex;
align-items: center;
flex-direction: column;
gap: 4px;
}
.search-wrapper .search-icon {
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
top: 14px;
color: var(--text-secondary);
pointer-events: none;
z-index: 1;
@ -267,7 +267,8 @@ a:hover {
}
.search-input-wrapper input {
width: 100%;
flex: 1;
min-width: 0;
padding: 8px 14px 8px 38px;
border: 1px solid var(--border);
border-radius: 6px;
@ -286,31 +287,29 @@ a:hover {
}
.search-actions {
position: absolute;
right: 4px;
top: 50%;
transform: translateY(-50%);
display: flex;
align-items: center;
gap: 4px;
gap: 2px;
flex-shrink: 0;
padding-left: 4px;
}
.search-btn {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
min-width: 26px;
height: 26px;
padding: 0 4px;
border: 1px solid var(--border);
border-radius: 4px;
background: var(--bg-secondary);
color: var(--text-secondary);
cursor: pointer;
font-family: "JetBrains Mono", monospace;
font-size: 0.75rem;
font-size: 0.7rem;
font-weight: 600;
transition: all 150ms ease;
padding: 0;
flex-shrink: 0;
}
@ -2660,13 +2659,14 @@ body.resizing-v {
}
.search-actions {
right: 6px;
gap: 2px;
}
.search-btn {
width: 34px;
height: 34px;
border-radius: 8px;
min-width: 28px;
height: 28px;
font-size: 0.65rem;
padding: 0 3px;
}
.search-dropdown {