From b7a20d9d41ea8bcefdd553b87641f3c22b4cde97 Mon Sep 17 00:00:00 2001
From: undergroundwires <git@undergroundwires.dev>
Date: Mon, 1 Apr 2024 20:39:54 +0200
Subject: [PATCH] Fix top script menu overflow on small screens

On very small screens (that can be tested with iPhone SE size), the
`All` button overflows. This makes E2E tests fail with width like
`320px`.

This commit fixes the issue by removing `whitespace: no-break` but
employing simpler and self-documenting layout.

Key changes:

- Simplify scripts menu layout instead of relying on
  `white-space: nowrap`.
- Increase gap when script menu items starts wrapping to avoid
  "squeezed" look.

Other supporting changes:

- Simplify gaps by using `column-gap` and `row-gap` properties rather
  than calculating margins.
- Use class-based styling instead of using `id`.
- Use more clear, consistent CSS class naming with prefixes in
  `TheScriptsMenu` to improve maintainability.
- Introduce `center-middle-flex-item` mixin for better documenting the
  code.
---
 .../Scripts/Menu/TheScriptsMenu.vue           | 59 ++++++++++++-------
 1 file changed, 38 insertions(+), 21 deletions(-)

diff --git a/src/presentation/components/Scripts/Menu/TheScriptsMenu.vue b/src/presentation/components/Scripts/Menu/TheScriptsMenu.vue
index 10911311..e2d80bcf 100644
--- a/src/presentation/components/Scripts/Menu/TheScriptsMenu.vue
+++ b/src/presentation/components/Scripts/Menu/TheScriptsMenu.vue
@@ -1,13 +1,13 @@
 <template>
-  <div id="container">
-    <div class="item rows">
-      <TheRecommendationSelector class="item" />
-      <TheRevertSelector class="item" />
+  <div class="scripts-menu">
+    <div class="scripts-menu-item scripts-menu-rows">
+      <TheRecommendationSelector class="scripts-menu-item" />
+      <TheRevertSelector class="scripts-menu-item" />
     </div>
-    <TheOsChanger class="item" />
+    <TheOsChanger class="scripts-menu-item" />
     <TheViewChanger
       v-if="!isSearching"
-      class="item"
+      class="scripts-menu-item"
       @view-changed="$emit('viewChanged', $event)"
     />
   </div>
@@ -67,29 +67,46 @@ export default defineComponent({
 </script>
 
 <style scoped lang="scss">
-$margin-between-lines: 7px;
-#container {
+@use "@/presentation/assets/styles/main" as *;
+@use 'sass:math';
+
+$spacing-small: math.div($base-spacing, 2);
+
+@mixin center-middle-flex-item {
+  &:first-child, &:last-child {
+    flex-grow: 1;
+    flex-basis: 0;
+  }
+  &:last-child {
+    justify-content: flex-end;
+  }
+}
+
+$responsive-alignment-breakpoint: $media-screen-medium-width;
+
+.scripts-menu {
   display: flex;
   flex-wrap: wrap;
-  margin-top: -$margin-between-lines;
-  .item {
-    flex: 1;
-    white-space: nowrap;
+  column-gap: $base-spacing;
+  row-gap: $base-spacing;
+  flex-wrap: wrap;
+  align-items: center;
+  margin-left: $spacing-small;
+  margin-right: $spacing-small;
+  @media screen and (max-width: $responsive-alignment-breakpoint) {
+    justify-content: space-around;
+  }
+  .scripts-menu-item {
     display: flex;
-    justify-content: center;
-    align-items: center;
-    margin: $margin-between-lines 5px 0 5px;
-    &:first-child {
-      justify-content: flex-start;
-    }
-    &:last-child {
-      justify-content: flex-end;
+    @media screen and (min-width: $responsive-alignment-breakpoint) {
+      @include center-middle-flex-item;
     }
   }
-  .rows {
+  .scripts-menu-rows {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
+    row-gap: 0.5em;
   }
 }
 </style>