Use explicit default input width for consistency across browsers

assets/remote_execution_cell/src/App.js

@@ -89,13 +89,14 @@ export default function App({ ctx, payload }) {
         </FieldWrapper>
         <FieldWrapper>
           <InlineLabel label="Assign to" />
-          <TextField
-            name="assign_to"
-            value={fields.assign_to}
-            onChange={(event) => handleChange(event, false)}
-            onBlur={handleBlur}
-            className="w-[120px]"
-          />
+          <div className="w-[140px]">
+            <TextField
+              name="assign_to"
+              value={fields.assign_to}
+              onChange={(event) => handleChange(event, false)}
+              onBlur={handleBlur}
+            />
+          </div>
         </FieldWrapper>
       </Header>
     </div>
@@ -128,12 +129,18 @@ function TextField({
   type = "text",
   className,
   required = false,
+  fullWidth = false,
   inputRef,
   startAdornment,
   ...props
 }) {
   return (
-    <div className="flex flex-col">
+    <div
+      className={classNames([
+        "flex max-w-full flex-col",
+        fullWidth ? "w-full" : "w-[20ch]",
+      ])}
+    >
       {label && (
         <label className="color-gray-800 mb-0.5 block text-sm font-medium">
           {label}
@@ -152,7 +159,7 @@ function TextField({
           type={type}
           value={value}
           className={classNames([
-            "bg-transparent px-3 py-2 text-sm text-gray-600 placeholder-gray-400 focus:outline-none",
+            "w-full bg-transparent px-3 py-2 text-sm text-gray-600 placeholder-gray-400 focus:outline-none",
             className,
           ])}
         />

assets/remote_execution_cell/src/main.css

@@ -1,11 +1,3 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
-/* Safari 11+ */
-
-@supports (-webkit-appearance: none) and (stroke-color: transparent) {
-  input[type="text"] {
-    max-width: 220px;
-  }
-}