From 31f07d925ad1f92fb372fb63189ff60206d57c83 Mon Sep 17 00:00:00 2001
From: zombieFox <crudetoaster@gmail.com>
Date: Tue, 22 Oct 2019 12:55:27 +0100
Subject: [PATCH] [design] improve group name and controls

---
 src/css/group.css | 21 +++++++++++++--------
 1 file changed, 13 insertions(+), 8 deletions(-)

diff --git a/src/css/group.css b/src/css/group.css
index 315bb819..cfcc9baa 100644
--- a/src/css/group.css
+++ b/src/css/group.css
@@ -29,8 +29,8 @@
   flex-direction: row;
   justify-content: flex-start;
   align-items: center;
-  flex-wrap: wrap;
-  transition: padding var(--layout-timing-extra-fast) var(--layout-duration-04);
+  flex-wrap: nowrap;
+  transition: padding var(--layout-timing-extra-fast);
 }
 
 .is-group-name-show .group-header,
@@ -41,19 +41,26 @@
 
 .group-name {
   margin-right: 0;
-  display: none;
+  display: flex;
   align-items: center;
-  min-height: 2.5em;
+  height: 0;
+  overflow: hidden;
   font-size: var(--group-name-size);
+  transition: height var(--layout-timing-extra-fast);
+  transition: height var(--layout-timing-extra-fast);
 }
 
 .is-group-name-show .group-name {
   display: flex;
+  height: 2.5em;
 }
 
 .group-name-text {
   font-family: var(--font-fjalla);
   margin-bottom: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .group-control {
@@ -62,6 +69,7 @@
   overflow: hidden;
   height: 0;
   width: 0;
+  flex-shrink: 0;
   transition:
     width var(--layout-timing-extra-fast),
     height var(--layout-timing-extra-fast) var(--layout-duration-04),
@@ -69,6 +77,7 @@
 }
 
 .is-link-edit .group-control {
+  margin-right: 1em;
   height: 2.5em;
   width: 16em;
   transition:
@@ -77,10 +86,6 @@
     margin var(--layout-timing-extra-fast) var(--layout-duration-04);
 }
 
-.is-link-edit.is-group-name-show .group-control {
-  margin-right: 1em;
-}
-
 .group-control-item {
   width: 4em;
   flex-shrink: 0;