layout fixes

2026-04-08 20:19:06 +03:00 · 2025-06-23 09:43:43 +03:00
parent ef45a8b258
commit 0cffec3df2
3 changed files with 26 additions and 25 deletions
--- a/popup/popup.css
+++ b/popup/popup.css
@@ -156,6 +156,7 @@ input[type="checkbox"].switch {
  width: 40px;
  height: 20px;
  background: var(--switch-bg);
+  border: 0px;
  border-radius: 20px;
  position: relative;
  outline: none;
@@ -239,7 +240,7 @@ button.danger:hover {
  max-height: 300px;
 }

-#wordList > div {
+#wordList>div {
  position: absolute;
  width: calc(100% - 8px);
  left: 4px;
@@ -248,9 +249,6 @@ button.danger:hover {
  gap: 6px;
  padding: 4px;
  box-sizing: border-box;
-  background: var(--highlight-tag);
-  border: 1px solid var(--highlight-tag-border);
-  border-radius: 30px;
 }

 #wordList input[type="text"] {
@@ -292,4 +290,6 @@ input[type="file"] {

 #wordCount {
  font-weight: normal;
-}
+  margin-left: -8px;
+  margin-right: -8px;
+}
--- a/popup/popup.html
+++ b/popup/popup.html
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -8,6 +9,7 @@
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" />
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">
 </head>
+
 <body class="dark">
  <div class="container">
    <h1><i class="fa-solid fa-marker"></i> <span data-i18n="extension_name">Goose Highlighter</span></h1>
@@ -24,7 +26,8 @@
      <select id="listSelect"></select>
      <div class="button-row">
        <button id="newListBtn"><i class="fa-solid fa-plus"></i> <span data-i18n="new_list">New</span></button>
-        <button id="deleteListBtn" class="danger"><i class="fa-solid fa-trash"></i> <span data-i18n="delete_list">Delete</span></button>
+        <button id="deleteListBtn" class="danger"><i class="fa-solid fa-trash"></i> <span
+            data-i18n="delete_list">Delete</span></button>
      </div>
    </div>

@@ -48,13 +51,14 @@
    </div>

    <div class="section">
-      <h2><i class="fa-solid fa-tags"></i> <span data-i18n="word_list">Word List</span> (<span id="wordCount">0</span>)</h2>
+      <h2><i class="fa-solid fa-tags"></i> <span data-i18n="word_list">Word List</span>(<span id="wordCount">0</span>)
+      </h2>
      <div class="button-row wrap">
        <button id="selectAllBtn"><span data-i18n="select_all">Select All</span></button>
        <button id="deselectAllBtn"><span data-i18n="deselect_all">Clear</span></button>
-        <button id="deleteSelectedBtn" class="danger"><span data-i18n="delete_selected">Delete</span></button>
-        <button id="disableSelectedBtn"><span data-i18n="disable_selected">Disable</span></button>
        <button id="enableSelectedBtn"><span data-i18n="enable_selected">Enable</span></button>
+        <button id="disableSelectedBtn"><span data-i18n="disable_selected">Disable</span></button>
+        <button id="deleteSelectedBtn" class="danger"><span data-i18n="delete_selected">Delete</span></button>
      </div>
      <div id="wordList"></div>
    </div>
@@ -71,4 +75,5 @@
  <script src="../storage.js"></script>
  <script src="popup.js"></script>
 </body>
-</html>
+
+</html>
--- a/popup/popup.js
+++ b/popup/popup.js
@@ -60,7 +60,6 @@ function renderWords() {
  const list = lists[currentListIndex];
  const fragment = document.createDocumentFragment();

-  // For virtualized list, calculate visible items
  const itemHeight = 32;
  const containerHeight = wordList.clientHeight;
  const scrollTop = wordList.scrollTop;
@@ -70,7 +69,12 @@ function renderWords() {
    list.words.length
  );

-  wordList.style.height = `${list.words.length * itemHeight}px`;
+  wordList.innerHTML = '';
+
+  const spacer = document.createElement('div');
+  spacer.style.position = 'relative';
+  spacer.style.height = `${list.words.length * itemHeight}px`;
+  spacer.style.width = '100%';

  for (let i = startIndex; i < endIndex; i++) {
    const w = list.words[i];
@@ -88,9 +92,7 @@ function renderWords() {
    container.style.boxSizing = 'border-box';
    container.style.background = 'var(--highlight-tag)';
    container.style.border = '1px solid var(--highlight-tag-border)';
-    container.style.borderRadius = '30px';

-    // Checkbox for selection
    const cbSelect = document.createElement("input");
    cbSelect.type = "checkbox";
    cbSelect.className = "word-checkbox";
@@ -99,7 +101,6 @@ function renderWords() {
      cbSelect.checked = true;
    }

-    // Text input for word
    const inputWord = document.createElement("input");
    inputWord.type = "text";
    inputWord.value = w.wordStr;
@@ -112,7 +113,6 @@ function renderWords() {
    inputWord.style.backgroundColor = 'var(--input-bg)';
    inputWord.style.color = 'var(--text-color)';

-    // Background color picker
    const inputBg = document.createElement("input");
    inputBg.type = "color";
    inputBg.value = w.background || list.background;
@@ -121,7 +121,6 @@ function renderWords() {
    inputBg.style.height = '24px';
    inputBg.style.flexShrink = '0';

-    // Foreground color picker
    const inputFg = document.createElement("input");
    inputFg.type = "color";
    inputFg.value = w.foreground || list.foreground;
@@ -130,7 +129,6 @@ function renderWords() {
    inputFg.style.height = '24px';
    inputFg.style.flexShrink = '0';

-    // Active checkbox container
    const activeContainer = document.createElement("label");
    activeContainer.className = "word-active";
    activeContainer.style.display = 'flex';
@@ -138,7 +136,6 @@ function renderWords() {
    activeContainer.style.gap = '4px';
    activeContainer.style.flexShrink = '0';

-    // Active checkbox
    const cbActive = document.createElement("input");
    cbActive.type = "checkbox";
    cbActive.checked = w.active !== false;
@@ -153,11 +150,10 @@ function renderWords() {
    container.appendChild(inputFg);
    container.appendChild(activeContainer);

-    fragment.appendChild(container);
+    spacer.appendChild(container);
  }

-  wordList.innerHTML = '';
-  wordList.appendChild(fragment);
+  wordList.appendChild(spacer);

  const wordCount = document.getElementById('wordCount');
  if (wordCount) {
@@ -183,7 +179,7 @@ wordList.addEventListener("change", e => {
      }
    } else if (e.target.dataset.activeEdit != null) {
      lists[currentListIndex].words[e.target.dataset.activeEdit].active = e.target.checked;
-      debouncedSave();
+      save();
    }
  }
 });
@@ -278,7 +274,7 @@ wordList.addEventListener("input", e => {
  if (e.target.dataset.bgEdit != null) word.background = e.target.value;
  if (e.target.dataset.fgEdit != null) word.foreground = e.target.value;

-  debouncedSave();
+  save();
 });

 wordList.addEventListener("change", e => {
@@ -291,7 +287,7 @@ wordList.addEventListener("change", e => {
      }
    } else if (e.target.dataset.activeEdit != null) {
      lists[currentListIndex].words[e.target.dataset.activeEdit].active = e.target.checked;
-      debouncedSave();
+      save();
    }
  }
 });