fix(frontend): sync persisted card rendering

assets/css/frontend/homepage-fixed/ajax-tab-error-state.css

@@ -61,10 +61,6 @@
     display: none;
   }
 
-  /* Card mode: 2 columns */
-  .aksrt-homepage__posts[data-view="card"] > .posts-item {
-    width: calc(50% - 16px);
-  }
 }
 
 /* ================================================================
@@ -102,7 +98,11 @@
     display: none;
   }
 
-  /* Card mode: 2 columns (match Zibll) */
+  /* Zibll keeps article cards in two columns throughout the mobile range. */
+  .aksrt-homepage__posts[data-view="card"] {
+    margin: -5px;
+  }
+
   .aksrt-homepage__posts[data-view="card"] > .posts-item {
     width: calc(50% - 10px);
     margin: 5px;
@@ -196,16 +196,6 @@
     font-size: 12px;
   }
 
-  /* Card mode: single column */
-  .aksrt-homepage__posts[data-view="card"] {
-    margin: 0;
-  }
-
-  .aksrt-homepage__posts[data-view="card"] > .posts-item {
-    width: 100%;
-    margin: 0 0 10px;
-  }
-
   /* Tab skeleton: adapt */
   .aksrt-homepage__tab-skeleton-thumb {
     width: 96px;

assets/js/homepage-fixed.js

@@ -816,7 +816,27 @@
 				return (activeBtn && activeBtn.getAttribute('data-view-mode')) || getViewMode();
 			}
 
-			applyViewMode(buttons, getPostsContainers(), getViewMode());
+			var initialMode = getViewMode();
+			var activePanel = getActivePanel(stream);
+			var renderedMode = activePanel ? activePanel.getAttribute('data-view') : '';
+			applyViewMode(buttons, getPostsContainers(), initialMode);
+
+			// The persisted preference may differ from the server-rendered mode.
+			// Class toggling alone leaves list-only markup and its `.flex` utility in
+			// place, which forces a supposed card to occupy a full row. Fetch the
+			// matching renderer immediately so DOM and visual mode stay atomic.
+			if (activePanel && renderedMode !== initialMode) {
+				requestHomepagePanel(activePanel, {
+					termId: getPanelTermId(activePanel),
+					page: 1,
+					perPage: getHomepagePerPage(activePanel),
+					sort: getCurrentSort(stream),
+					viewMode: initialMode,
+					panel: activePanel.getAttribute('data-home-tab-panel') || 'latest',
+					source: 'home',
+					tabOrderby: getPanelTabOrderby(activePanel)
+				});
+			}
 
 			buttons.forEach(function (btn) {
 				btn.addEventListener('click', function () {