More styling tweaks

ui/index.html

@@ -18,24 +18,26 @@
         text-align: center;
       }
 
-      #capture {
-        width: 20ch;
-      }
-
       #config {
         overflow-y: auto;
         max-height: 100vh;
         padding-left: 5px;
         box-sizing: border-box;
-        border-left: 3px solid black;
+        border-left: 3px solid #777;
+      }
+
+      #config .pure-button {
+        margin: 1px;
+        width: 20ch;
       }
 
       #config label {
-        max-width: 40%;
+        width: 40%;
       }
 
+      #config input,
       #config select {
-        max-width: 50%;
+        width: 50%;
       }
     </style>
     <script type="importmap">

ui/index.js

@@ -199,18 +199,22 @@ class App extends Component {
             h(
               'form',
               { class: 'pure-form pure-form-aligned' },
-              this.connection.supportedOps.triggerCapture
-                ? h(CaptureButton, { getFile: this.captureImage })
-                : undefined,
-              ' ',
               h(
-                'a',
+                'fieldset',
-                {
+                null,
-                  class: 'pure-button',
+                this.connection.supportedOps.triggerCapture
-                  href: 'https://github.com/GoogleChromeLabs/web-gphoto2',
+                  ? h(CaptureButton, { getFile: this.captureImage })
-                  target: '_blank'
+                  : undefined,
-                },
+                ' ',
-                '⭐ Star on Github'
+                h(
+                  'a',
+                  {
+                    class: 'pure-button',
+                    href: 'https://github.com/GoogleChromeLabs/web-gphoto2',
+                    target: '_blank'
+                  },
+                  '⭐ Star on Github'
+                )
               ),
               h(Widget, { config: state.config, setValue: this.setValue })
             )