Fix server style (#149)

* Fix server style

* Updates

* Fix for delete style

Author: eatonphil

ui/Connector.tsx

@@ -58,7 +58,7 @@ export function Connector({
         </div>
       </div>
       {expanded && (
-        <React.Fragment>
+        <div className="connector-body">
           {connector.type === 'database' && (
             <DatabaseConnector
               connector={connector as DatabaseConnectorInfo}
@@ -70,7 +70,7 @@ export function Connector({
               Close
             </Button>
           </div>
-        </React.Fragment>
+        </div>
       )}
     </div>
   );

ui/Server.tsx

@@ -83,7 +83,7 @@ export function Server({
         </div>
       </div>
       {expanded && (
-        <React.Fragment>
+        <div className="server-body">
           <div className="form-row">
             <Input
               label="Address"
@@ -184,7 +184,7 @@ export function Server({
               </Button>
             </div>
           )}
-        </React.Fragment>
+        </div>
       )}
     </div>
   );

ui/Updates.tsx

@@ -3,16 +3,18 @@ import { SITE_ROOT, VERSION } from '../shared/constants';
 import { request } from '../shared/http';
 import log from '../shared/log';
 import { ContentTypeInfo } from '../shared/state';
+import { SettingsContext } from './Settings';
 
 export function Updates() {
+  const { state: settings } = React.useContext(SettingsContext);
   const [updates, setUpdates] = React.useState(null);
   React.useEffect(function getUpdates() {
     async function run() {
       try {
         const updates = await request(
           window.fetch,
           'GET',
-          `${SITE_ROOT}/api/updates?version=${VERSION}`,
+          `${SITE_ROOT}/api/updates?version=${VERSION}&i=${settings.id}`,
           new ContentTypeInfo(),
           [],
           '',

ui/components/FileInput.tsx

@@ -83,8 +83,10 @@ export function FileInput({
   return (
     <label className={inputClass}>
       {label && <span className="input-label">{label}</span>}
-      {allowManualEntry && manualInput}
-      {allowFilePicker && input}
+      <span>
+        {allowManualEntry && manualInput}
+        {allowFilePicker && input}
+      </span>
     </label>
   );
 }

ui/style.css

@@ -430,11 +430,23 @@ input + input[type='file'] {
   padding: 10px;
   border: 1px solid transparent;
   border-bottom: 1px solid #ccc;
-}
 
-.server .hover-button,
-.connector .hover-button {
-  visibility: hidden;
+  .connector-body,
+  .server-body {
+    overflow-x: auto;
+  }
+
+  .radio-label,
+  .input-label,
+  .select-label {
+    display: inline-block;
+    text-align: right;
+    width: 100px; /* 200px should be more than enough for anyone */
+  }
+
+  .hover-button {
+    visibility: hidden;
+  }
 }
 
 .server:hover .hover-button,
@@ -459,20 +471,12 @@ input + input[type='file'] {
   overflow-x: hidden;
 }
 
-.connector {
-  overflow-x: auto;
-
-  .connector-header .input {
+.server--expanded,
+.connector--expanded {
+  .connector-name,
+  .server-name {
     width: 100%;
   }
-
-  .radio-label,
-  .input-label,
-  .select-label {
-    display: inline-block;
-    text-align: right;
-    width: 100px; /* 200px should be more than enough for anyone */
-  }
 }
 
 .pages {