Merge branch 'master' into GN-4854

lblod · Jul 4, 2024 · 0e4c3a2 · 0e4c3a2
2 parents 2078001 + 60751e4
commit 0e4c3a2
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 1 deletion.
diff --git a/.changeset/spotty-moose-return.md b/.changeset/spotty-moose-return.md
@@ -0,0 +1,5 @@
+---
+"@lblod/ember-rdfa-editor": patch
+---
+
+Fix behaviour of responsive toolbar
diff --git a/app/styles/ember-rdfa-editor/_c-toolbar.scss b/app/styles/ember-rdfa-editor/_c-toolbar.scss
@@ -47,14 +47,21 @@ $say-toolbar-height: 44px !default;
 .say-toolbar__side-dropdown {
   display: flex;
   justify-content: flex-start;
-  flex-wrap: wrap;
   min-height: $say-toolbar-height; // Fixes height bug on Safari
   border-radius: $au-unit-tiny;
   padding: 0.1rem $au-unit-tiny 0; // Visually center the text in the pill
   background-color: $say-toolbar-background;
   z-index: 1;
 }
 
+.say-toolbar__main-dropdown {
+  flex-wrap: wrap;
+}
+
+.say-toolbar__side-dropdown {
+  flex-direction: column;
+}
+
 .say-toolbar img {
   max-width: inherit;
   height: 100%;
@@ -75,6 +82,7 @@ $say-toolbar-height: 44px !default;
   padding-left: 0.1rem;
   padding-right: 0.1rem;
   flex-shrink: 0;
+  flex-grow: 1;
   align-items: center;
 }
 
@@ -164,6 +172,7 @@ $say-toolbar-height: 44px !default;
 
 .say-rdfa-toggle {
   padding: 0 1.2rem;
+  white-space: nowrap;
 }
 
 .say-toolbar__highlight-button {