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.

src/presentation/components/Scripts/Menu/TheScriptsMenu.vue

@@ -1,13 +1,13 @@
 <template>
-  <div id="container">
+  <div class="scripts-menu">
-    <div class="item rows">
+    <div class="scripts-menu-item scripts-menu-rows">
-      <TheRecommendationSelector class="item" />
+      <TheRecommendationSelector class="scripts-menu-item" />
-      <TheRevertSelector class="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;
+@use "@/presentation/assets/styles/main" as *;
-#container {
+@use 'sass:math';
-  display: flex;
+
-  flex-wrap: wrap;
+$spacing-small: math.div($base-spacing, 2);
-  margin-top: -$margin-between-lines;
+
-  .item {
+@mixin center-middle-flex-item {
-    flex: 1;
+  &:first-child, &:last-child {
-    white-space: nowrap;
+    flex-grow: 1;
-    display: flex;
+    flex-basis: 0;
-    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;
   }
+}
+
+$responsive-alignment-breakpoint: $media-screen-medium-width;
+
+.scripts-menu {
+  display: flex;
+  flex-wrap: wrap;
+  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;
   }
-  .rows {
+  .scripts-menu-item {
+    display: flex;
+    @media screen and (min-width: $responsive-alignment-breakpoint) {
+      @include center-middle-flex-item;
+    }
+  }
+  .scripts-menu-rows {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
+    row-gap: 0.5em;
   }
 }
 </style>