Fix SectionList hovering issue (#4749)

* Fix SectionList Items hover when <3 items

* Even easier...

js/src/ui/SectionList/sectionList.css

@@ -17,7 +17,6 @@
 
 $transition: all 0.25s;
 $widthNormal: 33.33%;
-$widthShrunk: 29%;
 $widthExpanded: 42%;
 
 .section {
@@ -39,18 +38,19 @@ $widthExpanded: 42%;
     display: flex;
     justify-content: center;
 
-    /* TODO: As per JS comments, the flex-base could be adjusted in the future to allow for */
+    /* TODO: As per JS comments, the flex-base could be adjusted in the future to allow for
     /* case where <> 3 columns are required should the need arrise from a UI pov. */
     .item {
       box-sizing: border-box;
       display: flex;
       flex: 0 1 $widthNormal;
-      max-width: $widthNormal;
       opacity: 0.85;
       padding: 0.25em;
+
       /* https://www.binarymoon.co.uk/2014/02/fixing-css-transitions-in-google-chrome/ */
       transform: translateZ(0);
       transition: $transition;
+      width: 0;
 
       &:hover {
         opacity: 1;
@@ -58,22 +58,13 @@ $widthExpanded: 42%;
       }
     }
 
-    &:hover {
-      .item {
-        &.stretchOn {
-          flex: 0 1 $widthShrunk;
-          max-width: $widthShrunk;
-
-          &:hover {
-            flex: 0 0 $widthExpanded;
-            max-width: $widthExpanded;
-          }
-        }
-      }
+    .item.stretchOn:hover {
+      flex: 0 0 $widthExpanded;
+      max-width: $widthExpanded;
     }
   }
 }
 
-.section+.section {
+.section + .section {
   margin-top: 1em;
 }