[design] improve group name and controls

Author: zombieFox

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,13 +69,15 @@
 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),
  margin var(--layout-timing-extra-fast);
 }
 
 .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;