From 32095dc25939a0925b5d515f0d84028e2f8f6815 Mon Sep 17 00:00:00 2001 From: fnsign Date: Mon, 29 Jun 2026 15:20:37 +0200 Subject: [PATCH 1/4] Enhance styles for minimal theme and code-block container, adjusting table width and margins for better layout --- styles.css | 34 ++++++++++++++++++++++++++++++++-- 1 file changed, 32 insertions(+), 2 deletions(-) diff --git a/styles.css b/styles.css index 4e6c60f..d2c92dc 100644 --- a/styles.css +++ b/styles.css @@ -6,14 +6,43 @@ display: none; } +/* --- Minimal theme: override table-width rules on our container --- + Minimal applies special width/margin/padding to any sizer > div that :has(table) + for table drag-handle support. Our widget contains a so we get those + rules too. Reset to normal content div behavior (centered, no drag padding). + Uses descendant :has() (not direct child) so it also works inside callouts. */ +.markdown-preview-view.is-readable-line-width + .markdown-preview-sizer > div:has(.block-language-embedded-omnisearch) { + width: var(--line-width) !important; + max-width: var(--max-width) !important; + margin-inline: var(--content-margin, auto) !important; + padding-inline-start: 0 !important; +} + +/* --- Code-block container (Obsidian-generated parent) --- */ +.block-language-embedded-omnisearch { + width: 100%; + max-width: 100%; + overflow: hidden; + box-sizing: border-box; +} + /* --- Wrapper --- */ .eo-wrap { - margin: 16px 0 10px; + margin: 16px auto 10px; width: 100%; + max-width: 100%; + overflow: hidden; box-sizing: border-box; font-family: var(--font-interface); } +/* --- Override Minimal theme table styling inside our widget --- */ +.eo-wrap table.eo-results-table { + min-width: 0 !important; + margin-inline: 0 !important; +} + /* --- Input --- */ .eo-input-wrap { position: relative; @@ -99,7 +128,8 @@ /* --- Results Table --- */ .eo-results-table { width: 100%; - table-layout: auto; + max-width: 100%; + table-layout: fixed; border-collapse: collapse; border-spacing: 0; margin: 0; From 57295dca3312ac2945a81ddf6e037563e3e0e94b Mon Sep 17 00:00:00 2001 From: fnsign Date: Mon, 29 Jun 2026 15:22:45 +0200 Subject: [PATCH 2/4] Bump to 1.3.0 --- manifest.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/manifest.json b/manifest.json index 339ee09..5d47798 100644 --- a/manifest.json +++ b/manifest.json @@ -1,7 +1,7 @@ { "id": "embedded-omnisearch", "name": "Embedded-Omnisearch", - "version": "1.2.9", + "version": "1.3.0", "minAppVersion": "1.0.0", "description": "Inline search UI powered by Omnisearch, with configurable page size, highlight color, and highlight opacity.", "author": "fnsign", From b88eceb44f3480df1ac4eeb8099616df9a24aadf Mon Sep 17 00:00:00 2001 From: fnsign Date: Mon, 29 Jun 2026 15:27:14 +0200 Subject: [PATCH 3/4] Enhance minimal theme support by adding reset markers and adjusting CSS for better layout handling --- main.js | 16 ++++++++++++++++ styles.css | 22 +++++++++------------- 2 files changed, 25 insertions(+), 13 deletions(-) diff --git a/main.js b/main.js index 4d95b33..b953798 100644 --- a/main.js +++ b/main.js @@ -300,9 +300,24 @@ class SearchView extends obsidian.Component { onunload() { clearTimeout(this.timer); if (this.popover && this.popover.parentNode) this.popover.remove(); + this.clearMinimalThemeResetMarker(); this.plugin.unregisterSearchView(this); } + markMinimalThemeResetContainer() { + const root = this.rootEl; + const container = root && root.parentElement; + if (!container || !container.classList.contains("el-pre")) return; + container.addClass("eo-minimal-reset"); + this.minimalThemeResetContainer = container; + } + + clearMinimalThemeResetMarker() { + if (!this.minimalThemeResetContainer) return; + this.minimalThemeResetContainer.removeClass("eo-minimal-reset"); + this.minimalThemeResetContainer = null; + } + getPageSize() { if (this.cfg && this.cfg.hasPageSizeOverride) return clampPageSize(this.cfg.pageSize); return clampPageSize(this.plugin.settings.pageSize); @@ -323,6 +338,7 @@ class SearchView extends obsidian.Component { const root = this.rootEl; root.empty(); root.addClass("omnisearch-modal", "eo-wrap"); + this.markMinimalThemeResetContainer(); /* Input */ const inputWrap = root.createDiv({ cls: "omnisearch-input-container eo-input-wrap" }); diff --git a/styles.css b/styles.css index d2c92dc..d6524a2 100644 --- a/styles.css +++ b/styles.css @@ -6,17 +6,13 @@ display: none; } -/* --- Minimal theme: override table-width rules on our container --- - Minimal applies special width/margin/padding to any sizer > div that :has(table) - for table drag-handle support. Our widget contains a
so we get those - rules too. Reset to normal content div behavior (centered, no drag padding). - Uses descendant :has() (not direct child) so it also works inside callouts. */ +/* --- Minimal theme: override table-width rules on our container --- */ .markdown-preview-view.is-readable-line-width - .markdown-preview-sizer > div:has(.block-language-embedded-omnisearch) { - width: var(--line-width) !important; - max-width: var(--max-width) !important; - margin-inline: var(--content-margin, auto) !important; - padding-inline-start: 0 !important; + .markdown-preview-sizer > div.el-pre.eo-minimal-reset { + width: var(--line-width); + max-width: var(--max-width); + margin-inline: var(--content-margin, auto); + padding-inline-start: 0; } /* --- Code-block container (Obsidian-generated parent) --- */ @@ -38,9 +34,9 @@ } /* --- Override Minimal theme table styling inside our widget --- */ -.eo-wrap table.eo-results-table { - min-width: 0 !important; - margin-inline: 0 !important; +.block-language-embedded-omnisearch.eo-wrap table.eo-results-table { + min-width: 0; + margin-inline: 0; } /* --- Input --- */ From c25c246eb071528331d44c8b73c09ba7f956159e Mon Sep 17 00:00:00 2001 From: fnsign Date: Mon, 29 Jun 2026 15:42:30 +0200 Subject: [PATCH 4/4] Refactor search results layout from table to grid for improved responsiveness and styling --- README.md | 2 +- main.js | 54 ++++++++++++-------------------------- styles.css | 77 +++++++++--------------------------------------------- 3 files changed, 30 insertions(+), 103 deletions(-) diff --git a/README.md b/README.md index 63c45ba..7249ee3 100644 --- a/README.md +++ b/README.md @@ -112,7 +112,7 @@ You can override any class in an Obsidian CSS snippet. Key classes: - `.eo-clear` — clear button - `.eo-status` — status / result count line - `.eo-results` — results container -- `.eo-results-table` — result table +- `.eo-results-grid` — result grid - `.eo-results-row` / `.eo-results-cell` — result rows and cells - `.eo-results-link` — clickable note link - `.eo-page-bar` / `.eo-page-btn` / `.eo-page-info` — pagination diff --git a/main.js b/main.js index b953798..0281ece 100644 --- a/main.js +++ b/main.js @@ -300,24 +300,9 @@ class SearchView extends obsidian.Component { onunload() { clearTimeout(this.timer); if (this.popover && this.popover.parentNode) this.popover.remove(); - this.clearMinimalThemeResetMarker(); this.plugin.unregisterSearchView(this); } - markMinimalThemeResetContainer() { - const root = this.rootEl; - const container = root && root.parentElement; - if (!container || !container.classList.contains("el-pre")) return; - container.addClass("eo-minimal-reset"); - this.minimalThemeResetContainer = container; - } - - clearMinimalThemeResetMarker() { - if (!this.minimalThemeResetContainer) return; - this.minimalThemeResetContainer.removeClass("eo-minimal-reset"); - this.minimalThemeResetContainer = null; - } - getPageSize() { if (this.cfg && this.cfg.hasPageSizeOverride) return clampPageSize(this.cfg.pageSize); return clampPageSize(this.plugin.settings.pageSize); @@ -338,7 +323,6 @@ class SearchView extends obsidian.Component { const root = this.rootEl; root.empty(); root.addClass("omnisearch-modal", "eo-wrap"); - this.markMinimalThemeResetContainer(); /* Input */ const inputWrap = root.createDiv({ cls: "omnisearch-input-container eo-input-wrap" }); @@ -361,7 +345,7 @@ class SearchView extends obsidian.Component { /* Results list */ this.resultsEl = root.createDiv({ cls: "eo-results" }); - this.buildResultsTable(); + this.buildResultsGrid(); /* Pagination */ this.pageBar = this.createPaginationBar(root); @@ -375,22 +359,16 @@ class SearchView extends obsidian.Component { return this.popover; } - buildResultsTable() { - const tbl = this.resultsEl.createEl("table", { cls: "eo-results-table" }); - setElementHidden(tbl, true); - const colgroup = tbl.createEl("colgroup"); - colgroup.createEl("col", { cls: "eo-col-file" }); - colgroup.createEl("col", { cls: "eo-col-score" }); - colgroup.createEl("col", { cls: "eo-col-preview" }); + buildResultsGrid() { + const grid = this.resultsEl.createDiv({ cls: "eo-results-grid" }); + setElementHidden(grid, true); + const headRow = grid.createDiv({ cls: "eo-results-head-row" }); + headRow.createDiv({ cls: "eo-results-head-cell eo-results-head-file", text: "File" }); + headRow.createDiv({ cls: "eo-results-head-cell eo-results-head-score", text: "Score" }); + headRow.createDiv({ cls: "eo-results-head-cell eo-results-head-preview", text: "Preview" }); - const thead = tbl.createEl("thead", { cls: "eo-results-head" }); - const headRow = thead.createEl("tr", { cls: "eo-results-head-row" }); - headRow.createEl("th", { cls: "eo-results-head-cell eo-results-head-file", text: "File" }); - headRow.createEl("th", { cls: "eo-results-head-cell eo-results-head-score", text: "Score" }); - headRow.createEl("th", { cls: "eo-results-head-cell eo-results-head-preview", text: "Preview" }); - - this.resultsTable = tbl; - this.resultsBody = tbl.createEl("tbody", { cls: "eo-results-body" }); + this.resultsGrid = grid; + this.resultsBody = grid.createDiv({ cls: "eo-results-body" }); } createPaginationBar(parent) { @@ -510,7 +488,7 @@ class SearchView extends obsidian.Component { resetResults() { if (this.resultsBody) this.resultsBody.empty(); - if (this.resultsTable) setElementHidden(this.resultsTable, true); + if (this.resultsGrid) setElementHidden(this.resultsGrid, true); this.results = []; this.page = 0; this.terms = []; @@ -578,22 +556,22 @@ class SearchView extends obsidian.Component { renderRow(result) { const path = String(result.path || ""); - const row = this.resultsBody.createEl("tr", { cls: "eo-results-row" }); + const row = this.resultsBody.createDiv({ cls: "eo-results-row" }); row.dataset.filepath = path; - const fileCell = row.createEl("td", { cls: "eo-results-cell eo-results-file" }); + const fileCell = row.createDiv({ cls: "eo-results-cell eo-results-file" }); fileCell.createEl("a", { cls: "internal-link eo-results-link", text: bname(path), attr: { href: path, "data-href": path } }); - row.createEl("td", { + row.createDiv({ cls: "eo-results-cell eo-results-score", text: String(Math.round(result.score || 0)) }); - const previewCell = row.createEl("td", { cls: "eo-results-cell eo-results-preview" }); + const previewCell = row.createDiv({ cls: "eo-results-cell eo-results-preview" }); appendHighlightedText(previewCell, result.excerpt, this.getResultTerms(result)); } @@ -608,7 +586,7 @@ class SearchView extends obsidian.Component { this.statusEl.textContent = this.results.length + " results \u2014 page " + (this.page + 1) + " of " + total; this.resultsBody.empty(); for (let i = 0; i < items.length; i++) this.renderRow(items[i]); - setElementHidden(this.resultsTable, false); + setElementHidden(this.resultsGrid, false); this.updatePaginationControls(total); } diff --git a/styles.css b/styles.css index d6524a2..3974492 100644 --- a/styles.css +++ b/styles.css @@ -6,18 +6,10 @@ display: none; } -/* --- Minimal theme: override table-width rules on our container --- */ -.markdown-preview-view.is-readable-line-width - .markdown-preview-sizer > div.el-pre.eo-minimal-reset { - width: var(--line-width); - max-width: var(--max-width); - margin-inline: var(--content-margin, auto); - padding-inline-start: 0; -} - /* --- Code-block container (Obsidian-generated parent) --- */ .block-language-embedded-omnisearch { width: 100%; + min-width: 0; max-width: 100%; overflow: hidden; box-sizing: border-box; @@ -27,18 +19,13 @@ .eo-wrap { margin: 16px auto 10px; width: 100%; + min-width: 0; max-width: 100%; overflow: hidden; box-sizing: border-box; font-family: var(--font-interface); } -/* --- Override Minimal theme table styling inside our widget --- */ -.block-language-embedded-omnisearch.eo-wrap table.eo-results-table { - min-width: 0; - margin-inline: 0; -} - /* --- Input --- */ .eo-input-wrap { position: relative; @@ -118,68 +105,30 @@ .eo-results { margin-top: 8px; width: 100%; - overflow-x: auto; + min-width: 0; } -/* --- Results Table --- */ -.eo-results-table { +/* --- Results Grid --- */ +.eo-results-grid { width: 100%; + min-width: 0; max-width: 100%; - table-layout: fixed; - border-collapse: collapse; - border-spacing: 0; - margin: 0; - border: 0; background: transparent; } -.eo-wrap table.eo-results-table, -.eo-wrap table.eo-results-table thead, -.eo-wrap table.eo-results-table tbody, -.eo-wrap table.eo-results-table tr, -.eo-wrap table.eo-results-table th, -.eo-wrap table.eo-results-table td, -.eo-wrap table.eo-results-table colgroup, -.eo-wrap table.eo-results-table col { - border: 0; - box-shadow: none; +.eo-results-head-row, +.eo-results-row { + display: grid; + grid-template-columns: minmax(0, 1fr) minmax(4.5ch, max-content) minmax(0, 3fr); + min-width: 0; background: transparent; - box-sizing: border-box; -} - -.eo-wrap table.eo-results-table th.eo-results-head-cell { - white-space: nowrap; - overflow-wrap: normal; - word-break: keep-all; - hyphens: none; -} - -.eo-col-file { - width: 24%; -} - -.eo-col-score { - width: 1%; -} - -.eo-col-preview { - width: 68%; -} - -.eo-wrap .eo-results-head-file, -.eo-wrap .eo-results-file { - min-width: 7ch; -} - -.eo-wrap .eo-results-head-preview, -.eo-wrap .eo-results-preview { - min-width: 9ch; } .eo-results-head-cell, .eo-results-cell { padding: 8px 10px; - vertical-align: top; + min-width: 0; + box-sizing: border-box; } .eo-results-head-cell {