[gnome-shell-sass] appDisplay: Adapt to available extra space showing icon grids

[Florian Müllner <fmuellner src gnome org>]

commit c6f134cc568d0cd82bc677e094c0366c2394706b
Author: Carlos Garnacho <carlosg gnome org>
Date:   Fri Feb 19 16:45:57 2021 +0100

    appDisplay: Adapt to available extra space showing icon grids
    
    Depending on the available horizontal space, we may want to manipulate
    the icon grid and scroll view spacing to result in an optimal layout
    that has space left to preview prev/next pages.
    
    The main change here is that, when adapting to the available size, the
    space given to a page does not necessarily match the available space,
    as we need to be able to show more than one page at a time.
    
    With this decoupling of available and page sizes in place, we now know
    how much space there is available in order to extend the padding between
    pages, or the fade effect applied to the previewed pages.
    
    Underneath, we rely a bit less on hardcoded CSS paddings, and a bit more
    on the StScrollView::content-padding property.
    
    All put together, gives us proper space management from ultra-wide
    displays, to display ratios that are close to the optimal grid ratio.
    
    Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/1630>

 widgets/_app-grid.scss | 26 +++++++++++++++-----------
 1 file changed, 15 insertions(+), 11 deletions(-)
---
diff --git a/widgets/_app-grid.scss b/widgets/_app-grid.scss
index f58dad0..4b6496a 100644
--- a/widgets/_app-grid.scss
+++ b/widgets/_app-grid.scss
@@ -125,10 +125,8 @@ $app_grid_fg_color: #fff;
   }
 }
 
-// Some hacks I don't even know
 .apps-scroll-view {
-  // horizontal padding to make sure scrollbars or dash don't overlap content
-  padding: 0 88px;
+  padding: 0;
 }
 
 // shutdown and other actions in the grid
@@ -140,20 +138,26 @@ $app_grid_fg_color: #fff;
 }
 
 .page-navigation-hint {
-  background: rgba(255, 255, 255, 0.05);
-  width: 88px;
+  width: 300px;
 
   &.dnd {
     background: rgba(255, 255, 255, 0.1);
   }
 
-  &.next {
-    &:ltr { border-radius: 15px 0px 0px 15px; }
-    &:rtl { border-radius: 0px 15px 15px 0px; }
+  &.next:ltr,
+  &.previous:rtl {
+    background-gradient-start: rgba(255, 255, 255, 0.05);
+    background-gradient-end: transparent;
+    background-gradient-direction: horizontal;
+    border-radius: 15px 0px 0px 15px;
   }
-  &.previous {
-    &:ltr { border-radius: 0px 15px 15px 0px; }
-    &:rtl { border-radius: 15px 0px 0px 15px; }
+
+  &.previous:ltr,
+  &.next:rtl {
+    background-gradient-start: transparent;
+    background-gradient-end: rgba(255, 255, 255, 0.05);
+    background-gradient-direction: horizontal;
+    border-radius: 0px 15px 15px 0px;
   }
 }