fix(layout): Ensure context menus aren't hidden in narrow windows. Cl…

…oses #3027. (#3040)

system-addon/content-src/components/Sections/_Sections.scss

@@ -77,6 +77,22 @@
     display: grid;
     grid-template-columns: repeat(auto-fit, $card-width);
     grid-gap: $base-gutter;
+
+    @media (max-width: $break-point-medium) {
+      @include context-menu-open-left;
+    }
+
+    @media (min-width: $break-point-medium) and (max-width: $break-point-large) {
+      :nth-child(2n) {
+        @include context-menu-open-left;
+      }
+    }
+
+    @media (min-width: $break-point-large) and (max-width: $break-point-large + 2*$card-width) {
+      :nth-child(3n) {
+        @include context-menu-open-left;
+      }
+    }
   }
 
   .section-empty-state {

system-addon/content-src/components/TopSites/_TopSites.scss

@@ -10,14 +10,45 @@
   padding: 0;
   margin-inline-end: -$base-gutter;
 
-  // 5 top sites
-  @media (min-width: $break-point-medium) {
-    width: $wrapper-max-width-medium + $base-gutter;
+  // Two columns
+  @media (max-width: $break-point-small) {
+    :nth-child(2n+1) {
+      @include context-menu-open-middle;
+    }
+    :nth-child(2n) {
+      @include context-menu-open-left;
+    }
   }
 
-  // 6 top sites
-  @media (min-width: $break-point-large) {
-    width: $wrapper-max-width-large + $base-gutter;
+  // Three columns
+  @media (min-width: $break-point-small) and (max-width: $break-point-medium) {
+    :nth-child(3n+2), :nth-child(3n) {
+      @include context-menu-open-left;
+    }
+  }
+
+  // Four columns
+  @media (min-width: $break-point-medium) and (max-width: $break-point-large) {
+    :nth-child(4n) {
+      @include context-menu-open-left;
+    }
+  }
+  @media (min-width: $break-point-medium) and (max-width: $break-point-medium + $card-width) {
+    :nth-child(4n+3) {
+      @include context-menu-open-left;
+    }
+  }
+
+  // Six columns
+  @media (min-width: $break-point-large) and (max-width: $break-point-large + 2*$card-width) {
+    :nth-child(6n) {
+      @include context-menu-open-left;
+    }
+  }
+  @media (min-width: $break-point-large) and (max-width: $break-point-large + $card-width) {
+    :nth-child(6n+5) {
+      @include context-menu-open-left;
+    }
   }
 
   li {

system-addon/content-src/styles/_variables.scss

@@ -108,3 +108,21 @@ $image-path: 'assets/';
     opacity: 1;
   }
 }
+
+@mixin context-menu-open-middle {
+  .context-menu {
+    margin-inline-start: auto;
+    margin-inline-end: auto;
+    offset-inline-start: -$base-gutter;
+    offset-inline-end: auto;
+  }
+}
+
+@mixin context-menu-open-left {
+  .context-menu {
+    margin-inline-start: auto;
+    margin-inline-end: 5px;
+    offset-inline-start: auto;
+    offset-inline-end: 0;
+  }
+}