diff --git a/src/csui/src/PlayerUiPanels/PlayerDetectionPanel.vue b/src/csui/src/PlayerUiPanels/PlayerDetectionPanel.vue
index f838340..84efc21 100644
--- a/src/csui/src/PlayerUiPanels/PlayerDetectionPanel.vue
+++ b/src/csui/src/PlayerUiPanels/PlayerDetectionPanel.vue
@@ -10,331 +10,340 @@
         <div class="flex flex-row">
           <h1><mdicon name="television-play" :size="32" /> Player element</h1>
         </div>
-        <div class="sub-panel-content">
-          <p>
-            You're probably on this page because Ultrawidify doesn't crop the player correctly.
-          </p>
-          <p>
-            If you hover over the boxes below, the corresponding element will change (sepia filter + higher brightness + reduced contrast + it gets an outline). Player element
-            should be the closest element to the video element, for which the sepia/brightness effect covers the area you expect the video will cover.
-          </p>
+        <div class="flex flex-row">
+          <div class="sub-panel-content">
+            <p>
+              You're probably on this page because Ultrawidify doesn't crop the player correctly.
+            </p>
+            <p>
+              If you hover over the boxes below, the corresponding element will change (sepia filter + higher brightness + reduced contrast + it gets an outline). Player element
+              should be the closest element to the video element, for which the sepia/brightness effect covers the area you expect the video will cover.
+            </p>
+            <p>
+              You need to reload the page for changes to take effect.
+            </p>
 
-          <p>
-             <a @click="showAdvancedOptions = !showAdvancedOptions">
-              <template v-if="showAdvancedOptions">Hide advanced options</template>
-              <template v-else>Show advanced options</template>
-             </a>
-          </p>
+            <!-- <p>
+              <a @click="showAdvancedOptions = !showAdvancedOptions">
+                <template v-if="showAdvancedOptions">Hide advanced options</template>
+                <template v-else>Show advanced options</template>
+              </a>
+            </p> -->
 
-          <div v-if="showAdvancedOptions" style="display: flex; flex-direction: row">
-            <div style="display: flex; flex-direction: column">
-              <div>
-                <input :checked="playerManualQs"
-                        @change="togglePlayerManualQs"
-                        type="checkbox"
-                />
+            <div v-if="showAdvancedOptions" style="display: flex; flex-direction: row">
+              <div style="display: flex; flex-direction: column">
                 <div>
-                  Use <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors" target="_blank">CSS selector</a> for player<br/>
-                  <small>If defining multiple selectors, separate them with commas.</small>
+                  <input :checked="playerManualQs"
+                          @change="togglePlayerManualQs"
+                          type="checkbox"
+                  />
+                  <div>
+                    Use <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors" target="_blank">CSS selector</a> for player<br/>
+                    <small>If defining multiple selectors, separate them with commas.</small>
+                  </div>
                 </div>
+                <div>Selector</div>
+                <input type="text"
+                  v-model="playerQs"
+                  @change="updatePlayerQuerySelector"
+                  @blur="updatePlayerQuerySelector"
+                  :disabled="playerByNodeIndex || !playerManualQs"
+                />
+              </div>
+              <div style="display: flex; flex-direction: column">
+                <b>Custom CSS for site</b>
+                <textarea></textarea>
               </div>
-              <div>Selector</div>
-              <input type="text"
-                v-model="playerQs"
-                @change="updatePlayerQuerySelector"
-                @blur="updatePlayerQuerySelector"
-                :disabled="playerByNodeIndex || !playerManualQs"
-              />
             </div>
-            <div style="display: flex; flex-direction: column">
-              <b>Custom CSS for site</b>
-              <textarea></textarea>
-            </div>
-          </div>
 
-          <div style="display: flex; flex-direction: row;">
-            <div class="element-tree">
-              <table>
-                <thead>
-                  <tr>
-                    <th>
-                      <div class="status-relative">
-                        Status <mdicon name="help-circle" @click="showLegend = !showLegend" />
+            <div style="display: flex; flex-direction: row;">
+              <div class="element-tree">
+                <table>
+                  <thead>
+                    <tr>
+                      <th>
+                        <div class="status-relative">
+                          Status <mdicon name="help-circle" @click="showLegend = !showLegend" />
 
-                        <div v-if="showLegend" class="element-symbol-legend">
-                          <b>Symbols:</b><br />
-                          <mdicon name="alert-remove" class="invalid" /> Element of invalid dimensions<br />
-                          <mdicon name="refresh-auto" class="auto-match" /> Ultrawidify's player detection thinks this should be the player<br />
-                          <mdicon name="bookmark" class="parent-offset-match" /> Site settings say this should be the player (based on counting parents)<br />
-                          <mdicon name="crosshairs" class="qs-match" /> Site settings say this should be the player (based on query selectors)<br />
-                          <mdicon name="check-circle" class="activePlayer" /> Element that is actually the player
-                        </div>
-                      </div>
-                    </th>
-                    <th>Element</th>
-                    <th>Actions</th>
-                    <!-- <th>Quick fixes</th> -->
-                  </tr>
-                </thead>
-                <tbody>
-                  <tr
-                    v-for="(element, index) of elementStack"
-                    :key="index"
-                    class="element-row"
-                  >
-                    <td>
-                      <div class="status">
-                        <div
-                          v-if="element.heuristics?.invalidSize"
-                          class="invalid"
-                        >
-                          <mdicon name="alert-remove" />
-                        </div>
-                        <div
-                          v-if="element.heuristics?.autoMatch"
-                          class="auto-match"
-                        >
-                          <mdicon name="refresh-auto" />
-                        </div>
-                        <div
-                          v-if="element.heuristics?.qsMatch"
-                          class="qs-match"
-                        >
-                          <mdicon name="crosshairs" />
-                        </div>
-                        <div
-                          v-if="element.heuristics?.manualElementByParentIndex"
-                          class="parent-offset-match"
-                        >
-                          <mdicon name="bookmark" />
-                        </div>
-                        <div
-                          v-if="element.heuristics?.activePlayer"
-                          class="activePlayer"
-                        >
-                          <mdicon name="check-circle" />
-                        </div>
-                      </div>
-                    </td>
-                    <td>
-                      <div
-                        class="element-data"
-
-                        @mouseover="markElement(index, true)"
-                        @mouseleave="markElement(index, false)"
-
-                        @click="setPlayer(index)"
-                      >
-                        <div class="tag">
-                          <b>{{element.tagName}}</b> <i class="id">{{element.id ? `#`:''}}{{element.id}}</i>  @ <span class="dimensions">{{element.width}}</span>x<span class="dimensions">{{element.height}}</span>
-
-                        </div>
-                        <div v-if="element.classList" class="class-list">
-                          <div v-for="cls of element.classList" :key="cls">
-                            {{cls}}
+                          <div v-if="showLegend" class="element-symbol-legend">
+                            <b>Symbols:</b><br />
+                            <mdicon name="alert-remove" class="invalid" /> Element of invalid dimensions<br />
+                            <mdicon name="refresh-auto" class="auto-match" /> Ultrawidify's player detection thinks this should be the player<br />
+                            <mdicon name="bookmark" class="parent-offset-match" /> Site settings say this should be the player (based on counting parents)<br />
+                            <mdicon name="crosshairs" class="qs-match" /> Site settings say this should be the player (based on query selectors)<br />
+                            <mdicon name="check-circle" class="activePlayer" /> Element that is actually the player
                           </div>
                         </div>
-                      </div>
-                    </td>
-                    <td>
-                      <div class="flex flex-row">
-                        <!-- <div @click="designatePlayer(index)">Set as player {{ index }}</div> -->
-                      </div>
-                    </td>
-                    <!-- <td>
-                      <div
-                        class="css-fixes"
-                      >
-                        <div style="width: 100%"><b>Quick fixes:</b></div>
+                      </th>
+                      <th>Element</th>
+                      <!-- <th>Actions</th> -->
+                      <!-- <th>Quick fixes</th> -->
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr
+                      v-for="(element, index) of elementStack"
+                      :key="index"
+                      class="element-row"
+                    >
+                      <td>
+                        <div class="status">
+                          <div
+                            v-if="element.heuristics?.invalidSize"
+                            class="invalid"
+                          >
+                            <mdicon name="alert-remove" />
+                          </div>
+                          <div
+                            v-if="element.heuristics?.autoMatch"
+                            class="auto-match"
+                          >
+                            <mdicon name="refresh-auto" />
+                          </div>
+                          <div
+                            v-if="element.heuristics?.qsMatch"
+                            class="qs-match"
+                          >
+                            <mdicon name="crosshairs" />
+                          </div>
+                          <div
+                            v-if="element.heuristics?.manualElementByParentIndex"
+                            class="parent-offset-match"
+                          >
+                            <mdicon name="bookmark" />
+                          </div>
+                          <div
+                            v-if="element.heuristics?.activePlayer"
+                            class="activePlayer"
+                          >
+                            <mdicon name="check-circle" />
+                          </div>
+                        </div>
+                      </td>
+                      <td>
                         <div
-                          class="css-line"
-                          :class="{'active': cssStack[index]?.includes('width: 100%;')}"
-                          @click="toggleCssForElement(index, 'width: 100%;')"
-                        >
-                          Width: 100%
-                        </div>
-                        <div
-                          class="css-line"
-                          :class="{'active': cssStack[index]?.includes('height: 100%;')}"
-                          @click="toggleCssForElement(index, 'height: 100%;')"
-                        >
-                          Height: 100%
-                        </div>
-                        <div
-                          class="css-line"
-                          :class="{'active': cssStack[index]?.includes('display: flex;')}"
-                          @click="toggleCssForElement(index, 'display: flex;')"
-                        >
-                          Display: flex
-                        </div>
-                        <div class="css-line">
-                          Flex direction:
-                          <span
-                            class="css-line-suboption"
-                            :class="{'active': cssStack[index]?.includes('flex-direction: row;')}"
-                            @click="toggleCssForElement(index, 'flex-direction', 'row')"
-                          >
-                            row
-                          </span> |
-                          <span
-                            class="css-line-suboption"
-                            :class="{'active': cssStack[index]?.includes('flex-direction: column;')}"
-                            @click="toggleCssForElement(index, 'flex-direction', 'column')"
-                          >
-                            column
-                          </span>
-                        </div>
-                        <div class="css-line">
-                          Justify content:
-                          <span
-                            class="css-line-suboption"
-                            :class="{'active': cssStack[index]?.includes('justify-content: start;')}"
-                            @click="toggleCssForElement(index, 'justify-content', 'start')"
-                          >
-                            start
-                          </span> |
-                          <span
-                            class="css-line-suboption"
-                            :class="{'active': cssStack[index]?.includes('justify-content: center;')}"
-                            @click="toggleCssForElement(index, 'justify-content', 'center')"
-                          >
-                            center
-                          </span> |
-                          <span
-                            class="css-line-suboption"
-                            :class="{'active': cssStack[index]?.includes('justify-content: end;')}"
-                            @click="toggleCssForElement(index, 'justify-content', 'end')"
-                          >
-                            end
-                          </span>
-                        </div>
-                        <div class="css-line">
-                          Align items:
-                          <span
-                            class="css-line-suboption"
-                            :class="{'active': cssStack[index]?.includes('align-items: start;')}"
-                            @click="toggleCssForElement(index, 'align-items', 'start')"
-                          >
-                            start
-                          </span> |
-                          <span
-                            class="css-line-suboption"
-                            :class="{'active': cssStack[index]?.includes('align-items: center;')}"
-                            @click="toggleCssForElement(index, 'align-items', 'center')"
-                          >
-                            center
-                          </span> |
-                          <span
-                            class="css-line-suboption"
-                            :class="{'active': cssStack[index]?.includes('align-items: end;')}"
-                            @click="toggleCssForElement(index, 'align-items', 'end')"
-                          >
-                            end
-                          </span>
-                        </div>
+                          class="element-data"
 
-                        <div class="css-line">
-                          Justify self:
-                          <span
-                            class="css-line-suboption"
-                            :class="{'active': cssStack[index]?.includes('justify-self: start;')}"
-                            @click="toggleCssForElement(index, 'justify-self', 'start')"
-                          >
-                            start
-                          </span> |
-                          <span
-                            class="css-line-suboption"
-                            :class="{'active': cssStack[index]?.includes('justify-self: center;')}"
-                            @click="toggleCssForElement(index, 'justify-self', 'center')"
-                          >
-                            center
-                          </span> |
-                          <span
-                            class="css-line-suboption"
-                            :class="{'active': cssStack[index]?.includes('justify-self: end;')}"
-                            @click="toggleCssForElement(index, 'justify-self', 'end')"
-                          >
-                            end
-                          </span>
+                          @mouseover="markElement(index, true)"
+                          @mouseleave="markElement(index, false)"
+
+                          @click="setPlayer(index)"
+                        >
+                          <div class="tag">
+                            <b>{{element.tagName}}</b> <i class="id">{{element.id ? `#`:''}}{{element.id}}</i>  @ <span class="dimensions">{{element.width}}</span>x<span class="dimensions">{{element.height}}</span>
+
+                          </div>
+                          <div v-if="element.classList" class="class-list">
+                            <div v-for="cls of element.classList" :key="cls">
+                              {{cls}}
+                            </div>
+                          </div>
                         </div>
-                        <div class="css-line">
-                          Align self:
-                          <span
-                            class="css-line-suboption"
-                            :class="{'active': cssStack[index]?.includes('align-self: start;')}"
-                            @click="toggleCssForElement(index, 'align-self', 'start')"
-                          >
-                            start
-                          </span> |
-                          <span
-                            class="css-line-suboption"
-                            :class="{'active': cssStack[index]?.includes('align-self: center;')}"
-                            @click="toggleCssForElement(index, 'align-self', 'center')"
-                          >
-                            center
-                          </span> |
-                          <span
-                            class="css-line-suboption"
-                            :class="{'active': cssStack[index]?.includes('align-self: end;')}"
-                            @click="toggleCssForElement(index, 'align-self', 'end')"
-                          >
-                            end
-                          </span>
+                      </td>
+                      <td>
+                        <div class="flex flex-row">
+                          <!-- <div @click="designatePlayer(index)">Set as player {{ index }}</div> -->
                         </div>
-                        <div class="css-line">
-                          Text-align:
-                          <span
-                            class="css-line-suboption"
-                            :class="{'active': cssStack[index]?.includes('text-align: left;')}"
-                            @click="toggleCssForElement(index, 'text-align', 'left')"
+                      </td>
+                      <!-- <td>
+                        <div
+                          class="css-fixes"
+                        >
+                          <div style="width: 100%"><b>Quick fixes:</b></div>
+                          <div
+                            class="css-line"
+                            :class="{'active': cssStack[index]?.includes('width: 100%;')}"
+                            @click="toggleCssForElement(index, 'width: 100%;')"
                           >
-                            left
-                          </span> |
-                          <span
-                            class="css-line-suboption"
-                            :class="{'active': cssStack[index]?.includes('text-align: center;')}"
-                            @click="toggleCssForElement(index, 'text-align', 'center')"
+                            Width: 100%
+                          </div>
+                          <div
+                            class="css-line"
+                            :class="{'active': cssStack[index]?.includes('height: 100%;')}"
+                            @click="toggleCssForElement(index, 'height: 100%;')"
                           >
-                            center
-                          </span> |
-                          <span
-                            class="css-line-suboption"
-                            :class="{'active': cssStack[index]?.find(x => x.includes('text-align: right'))}"
-                            @click="toggleCssForElement(index, 'text-align', 'right')"
+                            Height: 100%
+                          </div>
+                          <div
+                            class="css-line"
+                            :class="{'active': cssStack[index]?.includes('display: flex;')}"
+                            @click="toggleCssForElement(index, 'display: flex;')"
                           >
-                            right
-                          </span>
+                            Display: flex
+                          </div>
+                          <div class="css-line">
+                            Flex direction:
+                            <span
+                              class="css-line-suboption"
+                              :class="{'active': cssStack[index]?.includes('flex-direction: row;')}"
+                              @click="toggleCssForElement(index, 'flex-direction', 'row')"
+                            >
+                              row
+                            </span> |
+                            <span
+                              class="css-line-suboption"
+                              :class="{'active': cssStack[index]?.includes('flex-direction: column;')}"
+                              @click="toggleCssForElement(index, 'flex-direction', 'column')"
+                            >
+                              column
+                            </span>
+                          </div>
+                          <div class="css-line">
+                            Justify content:
+                            <span
+                              class="css-line-suboption"
+                              :class="{'active': cssStack[index]?.includes('justify-content: start;')}"
+                              @click="toggleCssForElement(index, 'justify-content', 'start')"
+                            >
+                              start
+                            </span> |
+                            <span
+                              class="css-line-suboption"
+                              :class="{'active': cssStack[index]?.includes('justify-content: center;')}"
+                              @click="toggleCssForElement(index, 'justify-content', 'center')"
+                            >
+                              center
+                            </span> |
+                            <span
+                              class="css-line-suboption"
+                              :class="{'active': cssStack[index]?.includes('justify-content: end;')}"
+                              @click="toggleCssForElement(index, 'justify-content', 'end')"
+                            >
+                              end
+                            </span>
+                          </div>
+                          <div class="css-line">
+                            Align items:
+                            <span
+                              class="css-line-suboption"
+                              :class="{'active': cssStack[index]?.includes('align-items: start;')}"
+                              @click="toggleCssForElement(index, 'align-items', 'start')"
+                            >
+                              start
+                            </span> |
+                            <span
+                              class="css-line-suboption"
+                              :class="{'active': cssStack[index]?.includes('align-items: center;')}"
+                              @click="toggleCssForElement(index, 'align-items', 'center')"
+                            >
+                              center
+                            </span> |
+                            <span
+                              class="css-line-suboption"
+                              :class="{'active': cssStack[index]?.includes('align-items: end;')}"
+                              @click="toggleCssForElement(index, 'align-items', 'end')"
+                            >
+                              end
+                            </span>
+                          </div>
+
+                          <div class="css-line">
+                            Justify self:
+                            <span
+                              class="css-line-suboption"
+                              :class="{'active': cssStack[index]?.includes('justify-self: start;')}"
+                              @click="toggleCssForElement(index, 'justify-self', 'start')"
+                            >
+                              start
+                            </span> |
+                            <span
+                              class="css-line-suboption"
+                              :class="{'active': cssStack[index]?.includes('justify-self: center;')}"
+                              @click="toggleCssForElement(index, 'justify-self', 'center')"
+                            >
+                              center
+                            </span> |
+                            <span
+                              class="css-line-suboption"
+                              :class="{'active': cssStack[index]?.includes('justify-self: end;')}"
+                              @click="toggleCssForElement(index, 'justify-self', 'end')"
+                            >
+                              end
+                            </span>
+                          </div>
+                          <div class="css-line">
+                            Align self:
+                            <span
+                              class="css-line-suboption"
+                              :class="{'active': cssStack[index]?.includes('align-self: start;')}"
+                              @click="toggleCssForElement(index, 'align-self', 'start')"
+                            >
+                              start
+                            </span> |
+                            <span
+                              class="css-line-suboption"
+                              :class="{'active': cssStack[index]?.includes('align-self: center;')}"
+                              @click="toggleCssForElement(index, 'align-self', 'center')"
+                            >
+                              center
+                            </span> |
+                            <span
+                              class="css-line-suboption"
+                              :class="{'active': cssStack[index]?.includes('align-self: end;')}"
+                              @click="toggleCssForElement(index, 'align-self', 'end')"
+                            >
+                              end
+                            </span>
+                          </div>
+                          <div class="css-line">
+                            Text-align:
+                            <span
+                              class="css-line-suboption"
+                              :class="{'active': cssStack[index]?.includes('text-align: left;')}"
+                              @click="toggleCssForElement(index, 'text-align', 'left')"
+                            >
+                              left
+                            </span> |
+                            <span
+                              class="css-line-suboption"
+                              :class="{'active': cssStack[index]?.includes('text-align: center;')}"
+                              @click="toggleCssForElement(index, 'text-align', 'center')"
+                            >
+                              center
+                            </span> |
+                            <span
+                              class="css-line-suboption"
+                              :class="{'active': cssStack[index]?.find(x => x.includes('text-align: right'))}"
+                              @click="toggleCssForElement(index, 'text-align', 'right')"
+                            >
+                              right
+                            </span>
+                          </div>
+                          <div class="css-line">
+                            Position:
+                            <span
+                              class="css-line-suboption"
+                              :class="{'active': cssStack[index]?.includes('position: relative;')}"
+                              @click="toggleCssForElement(index, 'position', 'relative')"
+                            >
+                              relative
+                            </span> |
+                            <span
+                              class="css-line-suboption"
+                              :class="{'active': cssStack[index]?.includes('position: absolute;')}"
+                              @click="toggleCssForElement(index, 'position', 'absolute')"
+                            >
+                              absolute
+                            </span>
+                          </div>
                         </div>
-                        <div class="css-line">
-                          Position:
-                          <span
-                            class="css-line-suboption"
-                            :class="{'active': cssStack[index]?.includes('position: relative;')}"
-                            @click="toggleCssForElement(index, 'position', 'relative')"
-                          >
-                            relative
-                          </span> |
-                          <span
-                            class="css-line-suboption"
-                            :class="{'active': cssStack[index]?.includes('position: absolute;')}"
-                            @click="toggleCssForElement(index, 'position', 'absolute')"
-                          >
-                            absolute
-                          </span>
-                        </div>
-                      </div>
-                    </td> -->
-                  </tr>
-                </tbody>
-              </table>
-              <div class="element-config">
+                      </td> -->
+                    </tr>
+                  </tbody>
+                </table>
+                <div class="element-config">
+                </div>
               </div>
-            </div>
 
-            <!-- <div class="css-preview">
-              {{cssStack}}
-            </div> -->
+              <!-- <div class="css-preview">
+                {{cssStack}}
+              </div> -->
+            </div>
           </div>
+
+          <!-- <div class="sub-panel-content">
+            <h2>Advanced settings</h2>
+          </div> -->
         </div>
       </div>
     </div>
@@ -450,6 +459,10 @@ export default({
 </script>
 
 <style lang="scss" scoped>
+p {
+  font-size: 1rem;
+}
+
 .element-tree {
   .element-row {
     // display: flex;
diff --git a/src/ext/lib/settings/SiteSettings.ts b/src/ext/lib/settings/SiteSettings.ts
index 0245788..edabe7f 100644
--- a/src/ext/lib/settings/SiteSettings.ts
+++ b/src/ext/lib/settings/SiteSettings.ts
@@ -256,6 +256,12 @@ export class SiteSettings {
 
   //#region get
   /**
+   * TODO: check what this function is really doing — implementation didn't make sense
+   * and didn't quite agree with the comment.
+   *
+   * specifically, this function used to always return currentDOMConfig, and the stuff
+   * done inside if block appeared to not be affected. It is also only used in one spot.
+   *
    * Gets DOMConfig. If DOMConfig with given name doesn't exist, we create a new one.
    * @param configName We want to fetch this DOM config
    * @param copyFrom If DOMConfig data doesn't exist, we copy things from DOMConfig with
@@ -264,10 +270,34 @@ export class SiteSettings {
    * @returns Current DOMConfig object for this site
    */
   getDOMConfig(configName: string, copyFrom?: string) {
+    // NOTE: this was added because
+    // there are no DOMConfig objects for this site
+    if (!this.data.DOMConfig) {
+      this.data.DOMConfig = {
+        'original': {
+          type: undefined,
+          elements: {
+            player: undefined,
+            video: undefined,
+            other: undefined,
+          },
+        },
+        'modified': {
+          type: undefined,
+          elements: {
+            player: undefined,
+            video: undefined,
+            other: undefined,
+          },
+        },
+      };
+    }
+
+    // TODO: check what's with that and if this can be removed? This if looks rather useless
     if (! this.data.DOMConfig[configName]) {
       this.data.DOMConfig[configName] = _cp(this.data.DOMConfig[copyFrom ?? this.data.activeDOMConfig ?? 'original']);
     }
-    return this.data.currentDOMConfig[configName];
+    return this.data.DOMConfig[configName];
   }
   //#endregion