chore: update sidebar and widgets styles

I'm now using a widget that can be expanded/collapsed. It also allows
me to handle more effectively widgets overflow and to avoid styles
repetitions.
However, with stylelint rule "no-descending-specificity", I'm not sure
if the stylesheets are really logical... Maybe I should deactivate this
rule.

1 files changed, 19 insertions, 12 deletions

diff --git a/src/components/Sidebar/Sidebar.module.scss b/src/components/Sidebar/Sidebar.module.scss
index 83c1024..18291b6 100644
--- a/src/components/Sidebar/Sidebar.module.scss
+++ b/src/components/Sidebar/Sidebar.module.scss
@@ -2,37 +2,44 @@
 
 .wrapper {
   grid-column: 2;
-  margin-top: var(--spacing-lg);
+  margin: var(--spacing-md) 0;
 
   @include mix.media("screen") {
     @include mix.dimensions("md") {
-      grid-column: 3;
-      grid-row: 2;
       align-self: stretch;
       display: flex;
-      flex-flow: column nowrap;
-      margin-top: 0;
-      position: relative;
-      visibility: hidden;
+      flex-flow: column;
+      justify-content: flex-start;
+      margin: var(--spacing-xs);
 
-      &:hover {
-        visibility: visible;
+      &--right {
+        grid-row: 2 / 4;
+        grid-column: 3;
       }
+    }
 
-      > * {
-        visibility: visible;
+    @include mix.dimensions("lg") {
+      &--left {
+        grid-row: 2 / 4;
+        grid-column: 1;
       }
     }
   }
 }
 
 .body {
+  display: flex;
+  flex-flow: column;
+  justify-content: flex-start;
+  max-height: 100vh;
+
   @include mix.media("screen") {
     @include mix.dimensions("md") {
       align-self: flex-start;
       width: 100%;
+      max-height: calc(100vh - (var(--spacing-xs) * 2));
       position: sticky;
-      top: 0;
+      top: var(--spacing-xs);
     }
   }
 }