NEOS-393: updated transformer select styling (#734)

nucleuscloud · Dec 4, 2023 · 533ef7c · 533ef7c
1 parent 8a04454
commit 533ef7c
Showing 1 changed file with 25 additions and 17 deletions.
diff --git a/frontend/components/jobs/SchemaTable/TransformerSelect.tsx b/frontend/components/jobs/SchemaTable/TransformerSelect.tsx
@@ -57,7 +57,7 @@ export default function TransformerSelect(props: Props): ReactElement {
         </Button>
       </PopoverTrigger>
       <PopoverContent
-        className="w-[300px] p-0"
+        className="w-[350px] p-0"
         side="left"
         avoidCollisions={false}
       >
@@ -97,14 +97,18 @@ export default function TransformerSelect(props: Props): ReactElement {
                       }}
                       value={t.name}
                     >
-                      <div className="flex flex-row items-center">
-                        <CheckIcon
-                          className={cn(
-                            'mr-2 h-4 w-4',
-                            value?.name == t?.name ? 'opacity-100' : 'opacity-0'
-                          )}
-                        />
-                        {t?.name}
+                      <div className="flex flex-row items-center justify-between w-full">
+                        <div className=" flex flex-row items-center">
+                          <CheckIcon
+                            className={cn(
+                              'mr-2 h-4 w-4',
+                              value?.name == t?.name
+                                ? 'opacity-100'
+                                : 'opacity-0'
+                            )}
+                          />
+                          <div className="items-center">{t?.name}</div>
+                        </div>
                         <div className="ml-2 text-gray-400 text-xs">
                           {t.dataType}
                         </div>
@@ -139,14 +143,18 @@ export default function TransformerSelect(props: Props): ReactElement {
                       }}
                       value={t.name}
                     >
-                      <div className="flex flex-row items-center">
-                        <CheckIcon
-                          className={cn(
-                            'mr-2 h-4 w-4',
-                            value?.name == t?.name ? 'opacity-100' : 'opacity-0'
-                          )}
-                        />
-                        {t?.name}
+                      <div className="flex flex-row items-center justify-between w-full">
+                        <div className=" flex flex-row items-center">
+                          <CheckIcon
+                            className={cn(
+                              'mr-2 h-4 w-4',
+                              value?.name == t?.name
+                                ? 'opacity-100'
+                                : 'opacity-0'
+                            )}
+                          />
+                          <div className="items-center">{t?.name}</div>
+                        </div>
                         <div className="ml-2 text-gray-400 text-xs">
                           {t.dataType}
                         </div>