[dashboard] always show default image and remove tag width limit

gitpod-io · Sep 21, 2023 · 951494c · 951494c
1 parent 972d717
commit 951494c
Showing 1 changed file with 10 additions and 10 deletions.
diff --git a/components/dashboard/src/teams/TeamSettings.tsx b/components/dashboard/src/teams/TeamSettings.tsx
@@ -276,10 +276,7 @@ function WorkspaceImageButton(props: {
     const image = props.settings?.defaultWorkspaceImage ?? props.defaultWorkspaceImage ?? "";
 
     const descList = useMemo(() => {
-        const arr: ReactNode[] = [];
-        if (!props.settings?.defaultWorkspaceImage) {
-            arr.push(<span className="font-medium">Default image</span>);
-        }
+        const arr: ReactNode[] = [<span className="font-medium">Default image</span>];
         if (props.disabled) {
             arr.push(
                 <>
@@ -288,7 +285,7 @@ function WorkspaceImageButton(props: {
             );
         }
         return arr;
-    }, [props.settings, props.disabled]);
+    }, [props.disabled]);
 
     const renderedDescription = useMemo(() => {
         return Children.toArray(descList).reduce((acc: ReactNode[], child, index) => {
@@ -304,20 +301,23 @@ function WorkspaceImageButton(props: {
         <InputField disabled={props.disabled} className="w-full max-w-lg">
             <div className="flex flex-col bg-gray-50 dark:bg-gray-800 p-3 rounded-lg">
                 <div className="flex items-center justify-between">
-                    <div className="flex items-center overflow-hidden h-8" title={image}>
+                    <div className="flex-1 flex items-center overflow-hidden h-8" title={image}>
                         <span className="w-5 h-5 mr-1">
                             <Stack />
                         </span>
                         <span className="truncate font-medium text-gray-700 dark:text-gray-200">
                             {parseDockerImage(image).repository}
                         </span>
                         &nbsp;&middot;&nbsp;
-                        <span className="flex-none w-16 truncate text-gray-500 dark:text-gray-400">
-                            {parseDockerImage(image).tag}
-                        </span>
+                        <span className="truncate text-gray-500 dark:text-gray-400">{parseDockerImage(image).tag}</span>
                     </div>
                     {!props.disabled && (
-                        <Button htmlType="button" type="transparent" className="text-blue-500" onClick={props.onClick}>
+                        <Button
+                            htmlType="button"
+                            type="transparent"
+                            className="text-blue-500 flex-none"
+                            onClick={props.onClick}
+                        >
                             Change
                         </Button>
                     )}