Admin settings alignment fix

assets/javascripts/community_landing/landing.js

@@ -173,7 +173,8 @@
     function openVideoModal(url) {
       var ytId = parseYouTubeId(url);
       if (ytId) {
-        videoPlayer.innerHTML = '<iframe src="https://www.youtube.com/embed/' + ytId + '?autoplay=1&rel=0" allow="autoplay; encrypted-media" allowfullscreen></iframe>';
+        var origin = encodeURIComponent(window.location.origin);
+        videoPlayer.innerHTML = '<iframe src="https://www.youtube.com/embed/' + ytId + '?autoplay=1&rel=0&origin=' + origin + '&enablejsapi=1" allow="autoplay; encrypted-media" allowfullscreen frameborder="0"></iframe>';
       } else {
         videoPlayer.innerHTML = '<video src="' + url + '" controls autoplay></video>';
       }

assets/javascripts/discourse/initializers/community-landing-admin-tabs.js

@@ -102,18 +102,6 @@ const TABS = [
   }
 ];
 
-// Pairs of dark/light background settings to display side-by-side
-const BG_PAIRS = [
-  ["hero_bg_dark", "hero_bg_light"],
-  ["hero_card_bg_dark", "hero_card_bg_light"],
-  ["stats_bg_dark", "stats_bg_light"],
-  ["about_bg_dark", "about_bg_light"],
-  ["topics_bg_dark", "topics_bg_light"],
-  ["groups_bg_dark", "groups_bg_light"],
-  ["app_cta_bg_dark", "app_cta_bg_light"],
-  ["footer_bg_dark", "footer_bg_light"],
-];
-
 let currentTab = "settings";
 let filterActive = false;
 let isActive = false;
@@ -141,14 +129,6 @@ function applyTabFilter() {
     );
   });
 
-  // Toggle visibility on bg-pair wrappers
-  container.querySelectorAll(".cl-bg-pair").forEach((pair) => {
-    const firstRow = pair.querySelector(".row.setting[data-setting]");
-    if (firstRow) {
-      pair.classList.toggle("cl-tab-hidden", firstRow.classList.contains("cl-tab-hidden"));
-    }
-  });
-
   // Update filter-active dimming on native nav or standalone tab bar
   const nativeNav = document.querySelector(".d-nav-submenu__tabs");
   if (nativeNav) {
@@ -204,25 +184,6 @@ function handleTabClick(container, tabId) {
   applyTabFilter();
 }
 
-function wrapBgPairs() {
-  const container = getContainer();
-  if (!container) return;
-
-  BG_PAIRS.forEach(([darkName, lightName]) => {
-    const darkRow = container.querySelector(`.row.setting[data-setting="${darkName}"]`);
-    const lightRow = container.querySelector(`.row.setting[data-setting="${lightName}"]`);
-    if (!darkRow || !lightRow) return;
-    // Skip if already wrapped
-    if (darkRow.parentElement && darkRow.parentElement.classList.contains("cl-bg-pair")) return;
-
-    const wrapper = document.createElement("div");
-    wrapper.className = "cl-bg-pair";
-    darkRow.parentNode.insertBefore(wrapper, darkRow);
-    wrapper.appendChild(darkRow);
-    wrapper.appendChild(lightRow);
-  });
-}
-
 /**
  * Remove all injected tabs and restore clean state.
  * Called when navigating away from the community-landing settings page.
@@ -249,15 +210,6 @@ function cleanupTabs() {
     standaloneBar.remove();
   }
 
-  // Unwrap bg-pair wrappers
-  document.querySelectorAll(".cl-bg-pair").forEach((wrapper) => {
-    const parent = wrapper.parentNode;
-    while (wrapper.firstChild) {
-      parent.insertBefore(wrapper.firstChild, wrapper);
-    }
-    wrapper.remove();
-  });
-
   // Remove cl-tabs-active from container and un-hide all settings
   const container = getContainer();
   if (container) {
@@ -332,7 +284,7 @@ function buildTabsUI() {
     });
 
     container.classList.add("cl-tabs-active");
-    wrapBgPairs();
+
     applyTabFilter();
     return true;
   }

assets/stylesheets/community_landing/admin.css

@@ -90,43 +90,6 @@ html.dark-scheme .cl-admin-tabs .cl-admin-tab:hover {
   padding-top: 0 !important;
 }
 
-/* ── Dual-color background pairs (side-by-side dark/light) ── */
-
-.cl-bg-pair {
-  display: flex;
-  gap: 16px;
-  width: 100%;
-}
-
-.cl-bg-pair > .row.setting {
-  flex: 1;
-  min-width: 0;
-  margin-bottom: 0 !important;
-  padding-bottom: 10px !important;
-}
-
-/* Inside bg-pairs, let the label and value stack vertically to fit the narrower space */
-.cl-bg-pair > .row.setting .setting-label {
-  float: none;
-  width: 100%;
-  margin-right: 0;
-}
-
-.cl-bg-pair > .row.setting .setting-value {
-  float: none;
-  width: 100%;
-  padding-right: 0;
-}
-
-.cl-bg-pair.cl-tab-hidden {
-  display: none !important;
-}
-
-@media (max-width: 600px) {
-  .cl-bg-pair {
-    flex-direction: column;
-  }
-}
 
 /* ── Fallback: Separator borders when tabs are NOT active ──
    (e.g. if JS fails to load or on older Discourse) */