port glitch-soc@`1329308` to monsterfork: [Glitch] Improvement variable height in single column layout

Port d93b82af87de90eaa29eb54a423722fb9fb45b38 to glitch-soc

Signed-off-by: Thibaut Girka <thib@sitedethib.com>

3 files changed, 41 insertions, 5 deletions

diff --git a/app/javascript/flavours/glitch/styles/components/composer.scss b/app/javascript/flavours/glitch/styles/components/composer.scss
index d71f07cc9..8ddb017a1 100644
--- a/app/javascript/flavours/glitch/styles/components/composer.scss
+++ b/app/javascript/flavours/glitch/styles/components/composer.scss
@@ -12,7 +12,8 @@
   opacity: 0.0;
 
   &.composer--spoiler--visible {
-    height: 47px;
+    height: 36px;
+    margin-bottom: 11px;
     opacity: 1.0;
   }
 
@@ -98,6 +99,9 @@
   border-radius: 4px;
   padding: 10px;
   background: $ui-primary-color;
+  min-height: 23px;
+  overflow-y: auto;
+  flex: 0 2 auto;
 
   & > header {
     margin-bottom: 5px;
@@ -220,6 +224,7 @@
   position: absolute;
   right: 5px;
   top: 5px;
+  z-index: 1;
 
   ::-webkit-scrollbar-track:hover,
   ::-webkit-scrollbar-track:active {
@@ -227,7 +232,7 @@
   }
 }
 
-.composer--textarea,
+.compose-form__autosuggest-wrapper,
 .autosuggest-input {
   position: relative;
 
@@ -286,6 +291,12 @@
   }
 }
 
+.emoji-picker-wrapper,
+.autosuggest-textarea__suggestions-wrapper {
+  position: relative;
+  height: 0;
+}
+
 .autosuggest-textarea__suggestions {
   display: block;
   position: absolute;
@@ -487,6 +498,7 @@
   box-shadow: inset 0 5px 5px rgba($base-shadow-color, 0.05);
   border-radius: 0 0 4px 4px;
   height: 27px;
+  flex: 0 0 auto;
 
   & > * {
     display: inline-block;
@@ -577,6 +589,7 @@
   text-align: right;
   white-space: nowrap;
   overflow: hidden;
+  justify-content: flex-end;
 
   & > .clear {
     float: left;
diff --git a/app/javascript/flavours/glitch/styles/components/index.scss b/app/javascript/flavours/glitch/styles/components/index.scss
index c882b8441..39ceb5abf 100644
--- a/app/javascript/flavours/glitch/styles/components/index.scss
+++ b/app/javascript/flavours/glitch/styles/components/index.scss
@@ -818,7 +818,8 @@
   margin-top: 10px;
   display: flex;
   flex-direction: column;
-  height: 100%;
+  height: calc(100% - 10px);
+  overflow-y: hidden;
 
   .search__input {
     line-height: 18px;
@@ -834,14 +835,33 @@
   .navigation-bar {
     padding-top: 20px;
     padding-bottom: 20px;
+    flex: 0 1 48px;
+    min-height: 20px;
   }
 
   .flex-spacer {
     background: transparent;
   }
 
+  .compose-form {
+    flex: 1;
+    overflow-y: hidden;
+    display: flex;
+    flex-direction: column;
+    min-height: 310px;
+    padding-bottom: 71px;
+    margin-bottom: -71px;
+  }
+
+  .compose-form__autosuggest-wrapper {
+    overflow-y: auto;
+    background-color: $white;
+    border-radius: 4px 4px 0 0;
+    flex: 0 1 auto;
+  }
+
   .autosuggest-textarea__textarea {
-    max-height: 200px;
+    overflow-y: hidden;
   }
 
   .compose-form__upload-thumbnail {
@@ -851,6 +871,9 @@
 
 .navigation-panel {
   margin-top: 10px;
+  margin-bottom: 10px;
+  height: calc(100% - 20px);
+  overflow-y: auto;
 
   hr {
     border: 0;
diff --git a/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss b/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss
index 3e4a15c9f..7da8edbde 100644
--- a/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss
+++ b/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss
@@ -125,7 +125,7 @@
 // Change the default color of several parts of the compose form
 .composer {
 
-  .composer--spoiler input, .composer--textarea textarea {
+  .composer--spoiler input, .compose-form__autosuggest-wrapper textarea {
     color: lighten($ui-base-color, 80%);
 
     &:disabled { background: lighten($simple-background-color, 10%) }