added respnsive flexbox to filter options and width limit for filter …

…options at larger sizes
agritheory · Feb 27, 2025 · 05346d0 · 05346d0
1 parent b3e9ec0
commit 05346d0
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 2 deletions.
diff --git a/beam/src/components/BeamFilter.vue b/beam/src/components/BeamFilter.vue
@@ -68,12 +68,18 @@ const getTotalHeight = (el: HTMLDivElement) => {
 }
 
 .beam_filters-options {
-	display: grid;
-	grid-template-columns: repeat(2, 1fr);
+	/* display: grid;
+	grid-template-columns: repeat(2, 1fr); */
+	display: flex;
+	flex-direction: row;
 	column-gap: 1rem;
 	background: white;
 	box-sizing: border-box;
 	padding: 0 1rem;
 	margin: 1rem 0;
+
+	@media (max-width: 500px) {
+		flex-direction: column;
+	}
 }
 </style>
diff --git a/beam/src/components/BeamFilterOption.vue b/beam/src/components/BeamFilterOption.vue
@@ -137,4 +137,14 @@ svg {
 		background: var(--sc-row-border-color);
 	}
 }
+.beam_filter-container {
+	flex-grow: 1;
+	max-width: 300px;
+	width: 50%;
+
+	@media (max-width: 500px) {
+		width: 100%;
+		max-width: 100%;
+	}
+}
 </style>