chore: adjust spacings, overflow and transitions of widgets

3 files changed, 11 insertions, 17 deletions

diff --git a/src/components/Sidebar/Sidebar.module.scss b/src/components/Sidebar/Sidebar.module.scss
index 6df997f..fb6230d 100644
--- a/src/components/Sidebar/Sidebar.module.scss
+++ b/src/components/Sidebar/Sidebar.module.scss
@@ -14,10 +14,7 @@
   @include mix.media("screen") {
     @include mix.dimensions("md") {
       align-self: stretch;
-      display: flex;
-      flex-flow: column;
-      justify-content: flex-start;
-      margin: var(--spacing-xs);
+      margin: 0 var(--spacing-xs) var(--spacing-md);
 
       &--right {
         grid-row: 2 / 4;
@@ -35,10 +32,6 @@
 }
 
 .body {
-  display: flex;
-  flex-flow: column;
-  justify-content: flex-start;
-
   @include mix.media("screen") {
     @include mix.dimensions("md") {
       align-self: flex-start;
diff --git a/src/components/WidgetParts/ExpandableWidget/ExpandableWidget.module.scss b/src/components/WidgetParts/ExpandableWidget/ExpandableWidget.module.scss
index cd63218..ab90179 100644
--- a/src/components/WidgetParts/ExpandableWidget/ExpandableWidget.module.scss
+++ b/src/components/WidgetParts/ExpandableWidget/ExpandableWidget.module.scss
@@ -51,11 +51,11 @@
   margin: 0 0 fun.convert-px(-6); // collapse borders
   overflow: hidden;
   visibility: hidden;
-  transition: max-height 0.5s linear 0s, margin 0.3s ease-in-out 0.3s,
-    visibility 0.1s linear 0.6s;
+  transition: all 0.6s cubic-bezier(0, 1, 0, 1) 0s, margin 0.2s ease-in-out 0s,
+    border 0.1s ease-in-out 0.3s, visibility 0.1s linear 0.6s;
 
   &--borders {
-    border: fun.convert-px(2) solid var(--color-primary-dark);
+    border: 0 solid transparent;
   }
 
   > *:last-child {
@@ -75,8 +75,6 @@
 
   display: flex;
   flex-flow: column;
-  height: max-content;
-  max-height: 100%;
 
   &--expanded {
     .icon::before {
@@ -84,12 +82,16 @@
     }
 
     .body {
-      max-height: 100%;
+      max-height: 10000px; // needs a fixed value for transition.
       margin: var(--spacing-sm) 0;
-      overflow-y: visible;
+      overflow: visible;
       visibility: visible;
       transition: visibility 0.1s linear 0s, max-height 0.6s linear 0s,
         margin 0.2s ease-in-out 0s;
+
+      &--borders {
+        border: fun.convert-px(2) solid var(--color-primary-dark);
+      }
     }
   }
 }
@@ -107,7 +109,6 @@
 }
 
 .header {
-  flex: 0 0 auto;
   display: flex;
   flex-flow: row nowrap;
   align-items: center;
@@ -123,7 +124,6 @@
   border-top: fun.convert-px(2) solid var(--color-primary-dark);
   border-bottom: fun.convert-px(2) solid var(--color-primary-dark);
   cursor: pointer;
-  transition: background 0.2s ease-in-out 0s;
 
   &:hover,
   &:focus {
diff --git a/src/components/Widgets/SocialMedia/SocialMedia.module.scss b/src/components/Widgets/SocialMedia/SocialMedia.module.scss
index 373cefb..2ef34bf 100644
--- a/src/components/Widgets/SocialMedia/SocialMedia.module.scss
+++ b/src/components/Widgets/SocialMedia/SocialMedia.module.scss
@@ -4,6 +4,7 @@
 .list {
   @extend %flex-list;
 
+  flex: 0 0 100%;
   gap: var(--spacing-xs);
   align-items: center;
   padding: var(--spacing-2xs) 0 0 var(--spacing-2xs);