feat: update layout and styles for product components and variant selectors

src/app/shared/components/variant-selector/variant-selector.component.scss

@@ -1,19 +1,22 @@
 :host {
   display: block;
+  width: 100%;
   min-width: 0;
 }
 
 .variant-selector {
-  display: flex;
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
   align-items: center;
   gap: 8px;
+  width: 100%;
   min-width: 0;
-  flex-wrap: wrap;
 }
 
 .variant-selector__select {
-  width: auto;
-  min-width: 120px;
+  width: 100%;
+  min-width: 0;
+  max-width: none;
   height: 38px;
   color: #666666;
   border-color: #cccccc;
@@ -24,35 +27,20 @@
     border-color: var(--tenant-primary);
     box-shadow: 0 0 0 0.25rem rgba(0, 153, 51, 0.25);
   }
+
+  &:first-child:nth-last-child(odd) {
+    grid-column: 1 / -1;
+  }
 }
 
 .variant-selector--compact {
-  justify-content: flex-end;
   gap: 4px;
 
   .variant-selector__select {
     min-width: 0;
-    max-width: 150px;
+    max-width: none;
     height: 28px;
     padding: 0.2rem 1.75rem 0.2rem 0.45rem;
     font-size: 11px;
   }
 }
-
-@media (max-width: 767.98px) {
-  .variant-selector {
-    display: grid;
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-    width: 100%;
-  }
-
-  .variant-selector__select {
-    width: 100%;
-    min-width: 0;
-    max-width: none;
-
-    &:first-child:nth-last-child(odd) {
-      grid-column: 1 / -1;
-    }
-  }
-}