schema: some schema editor fixes

components/schema/field-editor.tsx

@@ -101,14 +101,14 @@ export const FieldEditor: FC<IProps> = (
           <label className="w-min">
             Minimum:
             <input
-              className="w-12"
+              className="w-12 min-w-min"
               type="number"
               {...bindProperty("minimum")}
             />
           </label>
           <label className="w-min">
             Limit:
-            <input className="w-12" type="number" {...bindProperty("limit")} />
+            <input className="w-12 min-w-min" type="number" {...bindProperty("limit")} />
           </label>
           <HelpPopper>
             <p className="text-sm">

components/schema/index.tsx

@@ -55,8 +55,8 @@ export const SchemaBuilder: FC = () => {
 
   const {
     value: schemaFieldName,
-    bind: bindTemplateName,
-    reset: resetTemplateName,
+    bind: bindSchemaFieldName,
+    reset: resetSchemaFieldName,
   } = useInput("", { disallowSpaces: true });
   const addSchemaField = useCallback(() => {
     updateSchema((s) => ({
@@ -68,8 +68,8 @@ export const SchemaBuilder: FC = () => {
         },
       },
     }));
-    resetTemplateName();
-  }, [resetTemplateName, schemaFieldName, updateSchema]);
+    resetSchemaFieldName();
+  }, [resetSchemaFieldName, schemaFieldName, updateSchema]);
 
   const updateSchemaField = useCallback((key: string, template: Template) => {
     updateSchema((s) => ({
@@ -101,7 +101,7 @@ export const SchemaBuilder: FC = () => {
         <div>
           <p className="subheader mb-2">Add Schema Field</p>
           <div className="mb-2">
-            <input type="text" {...bindTemplateName} />
+            <input type="text" {...bindSchemaFieldName} />
             <button onClick={addSchemaField} disabled={!schemaFieldName}>
               Add
             </button>
@@ -178,13 +178,14 @@ export const SchemaBuilder: FC = () => {
       <div className="panel basis-1/3">
         <div className="flex gap-2 mb-2">
           <button
+            className="btn btn-small bg-green-800"
             onClick={saveSchema}
             disabled={lastSaved === schema}
           >
             Save Schema
           </button>
           <button
-            className="bg-red-800"
+            className="bg-red-800 btn btn-small"
             onClick={() => setSchema(lastSaved)}
             disabled={lastSaved === schema}
           >