fix name/time header styling

1 files changed, 12 insertions, 2 deletions

diff --git a/src/ui.js b/src/ui.js
index dc21943..8e20e4d 100644
--- a/src/ui.js
+++ b/src/ui.js
@@ -35,6 +35,7 @@ const Time = ({ time }) => {
 dom.css`
 .flex-space {
   flex: 1;
+  margin: 0;
 }
 `;
 
@@ -61,8 +62,7 @@ section > header {
   display: flex;
   flex-direction: row;
 
-  height: 2.5em;
-  line-height: 2.5em;
+  height: 1.75rem;
 
   color: var(--theme-header-fg);
   background: var(--theme-header-bg);
@@ -81,16 +81,26 @@ section > header.small {
 
 section > header > * {
   margin: 0 0.5em;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  line-height: 1.75rem;
 }
 
 section > header > img {
   height: 2em;
   width: 2em;
+  flex: 0 0 2em;
   margin: 0.25em;
   border-radius: 0.2em;
 }
 
+section > header > .user {
+  flex: 0 0.5 auto;
+}
+
 section > header > .time {
+  flex: 0 1 auto;
   font-size: 0.8em;
   color: #363636;
 }