MediaWiki:CustomFiltered.css

Note: After publishing, you may have to bypass your browser's cache to see the changes.

Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
Opera: Press Ctrl-F5.

.filtered {
  display: flex;
  flex-wrap: nowrap; /* Make sure they stay in one row */
}

.filtered-filters {
  flex: 0 0 25%; /* Don't grow or shrink, fixed at 25% width */
  max-width: 25%;
  box-sizing: border-box;
  padding: 1rem; /* Optional: spacing inside the filters panel */
}

@media (min-width:  1071px) {
	.filtered-filters {
      position: sticky !important;
      top: 5rem !important;	
	}
}

.filtered-views {
  flex: 1 1 75%; /* Grow to take remaining space */
  max-width: 75%;
  box-sizing: border-box;
  padding: 1rem; /* Optional: spacing inside the views panel */
}

.filtered-table table thead th {
	position: sticky !important;
}

/* Optional: make it responsive */
@media (max-width: 1070px) {
  .filtered {
    flex-direction: column; /* Stack vertically on smaller screens */
  }

  .filtered-filters,
  .filtered-views {
    max-width: 100%;
    flex: 0 0 100%;
  }
}