Nicer settings CSS

packages/trace-viewer/src/ui/settingsView.css

@@ -15,26 +15,27 @@
 */
 
 .settings-view {
+  display: flex;
   flex: none;
+  padding: 4px 0px;
+  row-gap: 8px;
   user-select: none;
 }
 
-.settings-view .setting label {
+.settings-view .setting {
   display: flex;
-  flex-direction: row;
   align-items: center;
-  margin: 4px 2px;
+}
+
+.settings-view .setting label {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+
   cursor: pointer;
 }
 
-.settings-view .setting:first-of-type label {
-  margin-top: 2px;
-}
-
-.settings-view .setting:last-of-type label {
-  margin-bottom: 2px;
-}
-
 .settings-view .setting input {
   margin-right: 5px;
+  flex-shrink: 0;
 }

packages/trace-viewer/src/ui/settingsView.tsx

@@ -30,16 +30,17 @@ export const SettingsView: React.FunctionComponent<{
   return (
     <div className='vbox settings-view'>
       {settings.map(({ value, set, name, title }) => {
+        const labelId = `setting-${name}`;
+
         return (
           <div key={name} className='setting' title={title}>
-            <label>
-              <input
-                type='checkbox'
-                checked={value}
-                onChange={() => set(!value)}
-              />
-              {name}
-            </label>
+            <input
+              type='checkbox'
+              id={labelId}
+              checked={value}
+              onChange={() => set(!value)}
+            />
+            <label htmlFor={labelId}>{name}</label>
           </div>
         );
       })}