Add overflow for container name to prevent UI from overflowing. Fixes #240

data/usercontext.css

@@ -105,16 +105,23 @@ value, or chrome url path as an alternate selector mitiages this bug.*/
 #userContext-indicator {
   height: 16px;
   list-style-image: none !important;
+  vertical-align: middle;
   width: 16px;
 }
 
 #userContext-label {
-  margin-inline-end: 5px;
   color: var(--identity-tab-color) !important;
+  margin-inline-end: 5px;
+  max-inline-size: 75px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 #userContext-icons {
   -moz-box-align: center;
+  align-items: center;
+  display: flex;
+  max-inline-size: 120px;
 }
 
 .userContext-icon,

webextension/css/popup.css

@@ -416,6 +416,13 @@ span ~ .panel-header-text {
 }
 
 /* Container info list */
+#container-info-name {
+  margin-inline-end: 0.5rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 #container-info-hideorshow {
   margin-block-start: 4px;
 }

webextension/popup.html

@@ -99,7 +99,7 @@
         <form id="edit-container-panel-form">
           <fieldset>
             <legend>Name</legend>
-            <input type="text" name="container-name" id="edit-container-panel-name-input"/>
+            <input type="text" name="container-name" id="edit-container-panel-name-input" maxlength="25"/>
           </fieldset>
           <fieldset id="edit-container-panel-choose-color">
             <legend>Choose a color</legend>