Minor dashboard updates

frontend/src/views/DashboardPage/components/SecretInputRow/SecretInputRow.tsx

@@ -2,11 +2,13 @@
 import { Controller, useFieldArray, useFormContext, useWatch } from 'react-hook-form';
 import {
   faCodeBranch,
+  faComment,
   faEllipsis,
   faInfoCircle,
   faPlus,
   faSquare,
   faSquareCheck,
+  faTags,
   faTrash
 } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
@@ -39,7 +41,6 @@ type Props = {
   isReadOnly?: boolean;
   isAddOnly?: boolean;
   isRollbackMode?: boolean;
-  isCommentColumnCollapsed: boolean;
   isSecretValueHidden: boolean;
   searchTerm: string;
   // to record the ids of deleted ones
@@ -64,7 +65,6 @@ const tagColors = [
 
 export const SecretInputRow = ({
   index,
-  isCommentColumnCollapsed,
   isSecretValueHidden,
   onRowExpand,
   isReadOnly,
@@ -146,8 +146,8 @@ export const SecretInputRow = ({
   }
 
   return (
-    <tr className="group">
-      <td className="px-4 text-center text-xs">{index + 1}</td>
+    <tr className="group min-w-full flex flex-row">
+      <td className="w-10 px-4 flex items-center justify-center"><div className='text-center text-xs text-bunker-400'>{index + 1}</div></td>
       <Controller
         control={control}
         defaultValue=""
@@ -156,7 +156,7 @@ export const SecretInputRow = ({
           <HoverCard openDelay={0} open={error?.message ? undefined : false}>
             <HoverCardTrigger asChild>
               <td className={cx(error?.message ? 'rounded ring ring-red/50' : null)}>
-                <div className="relative flex items-center">
+                <div className="min-w-[220px] relative flex items-center">
                   <Input
                     autoComplete="off"
                     variant="plain"
@@ -194,61 +194,36 @@ export const SecretInputRow = ({
           </HoverCard>
         )}
       />
-      <Popover>
-        <PopoverTrigger asChild>
-          <td className="w-auto max-w-[180px] cursor-pointer text-sm hover:outline hover:outline-mineshaft-400">
-            {isCommentColumnCollapsed ? (
-              <div className="flex justify-center">
-                {hasComment && <FontAwesomeIcon icon={faInfoCircle} />}
-              </div>
-            ) : (
-              <div className="overflow-hidden overflow-ellipsis whitespace-nowrap px-2">
-                {secret.comment || '-'}
-              </div>
-            )}
-          </td>
-        </PopoverTrigger>
-        <PopoverContent className="w-auto">
-          <FormControl label="Comment" className="mb-0">
-            <TextArea
-              isDisabled={isReadOnly || isRollbackMode || shouldBeBlockedInAddOnly}
-              {...register(`secrets.${index}.comment`)}
-              rows={8}
-              cols={30}
-            />
-          </FormControl>
-        </PopoverContent>
-      </Popover>
-      <td className="flex items-center">
-        <div className="flex-grow">
-          {!isOverridden && (
-            <Input
-              variant="plain"
-              isReadOnly={isReadOnly || shouldBeBlockedInAddOnly || isRollbackMode}
-              className="w-full text-ellipsis font-mono focus:text-bunker-100 focus:ring-transparent"
-              type={canRevealSecret || isSecretValueHidden ? 'text' : 'password'}
-              {...register(`secrets.${index}.value`)}
-              placeholder="EMPTY"
-              onBlur={setCanRevealSecret.off}
-              onFocus={setCanRevealSecret.on}
-              autoComplete="off"
-            />
-          )}
-          {isOverridden && (
-            <Input
-              variant="plain"
-              isReadOnly={isReadOnly || isAddOnly || isRollbackMode}
-              className="w-full text-ellipsis font-mono focus:text-bunker-100 focus:ring-transparent"
-              type={canRevealSecret || isSecretValueHidden ? 'text' : 'password'}
-              placeholder="EMPTY"
-              {...register(`secrets.${index}.valueOverride`)}
-              onBlur={setCanRevealSecret.off}
-              onFocus={setCanRevealSecret.on}
-              autoComplete="off"
-            />
-          )}
-        </div>
-        <div className="flex items-center group-hover:mr-2 group-hover:border-r group-hover:border-mineshaft-600">
+      <div className="flex-grow w-full">
+        {!isOverridden && (
+          <Input
+            variant="plain"
+            isReadOnly={isReadOnly || shouldBeBlockedInAddOnly || isRollbackMode}
+            className="w-full text-ellipsis font-mono focus:text-bunker-100 focus:ring-transparent"
+            type={canRevealSecret || isSecretValueHidden ? 'text' : 'password'}
+            {...register(`secrets.${index}.value`)}
+            placeholder="EMPTY"
+            onBlur={setCanRevealSecret.off}
+            onFocus={setCanRevealSecret.on}
+            autoComplete="off"
+          />
+        )}
+        {isOverridden && (
+          <Input
+            variant="plain"
+            isReadOnly={isReadOnly || isAddOnly || isRollbackMode}
+            className="w-full text-ellipsis font-mono focus:text-bunker-100 focus:ring-transparent"
+            type={canRevealSecret || isSecretValueHidden ? 'text' : 'password'}
+            placeholder="EMPTY"
+            {...register(`secrets.${index}.valueOverride`)}
+            onBlur={setCanRevealSecret.off}
+            onFocus={setCanRevealSecret.on}
+            autoComplete="off"
+          />
+        )}
+      </div>
+      <td className="flex items-center min-w-sm">
+        <div className="flex items-center group-hover:mr-0 group-hover:border-r group-hover:border-mineshaft-600">
           {secretTags.map(({ id, slug }, i) => (
             <Tag
               className={cx(
@@ -269,7 +244,7 @@ export const SecretInputRow = ({
                   <div>
                     <Tooltip content="Add tag">
                       <IconButton variant="star" size="xs" ariaLabel="add-tag">
-                        <FontAwesomeIcon icon={faPlus} />
+                        <FontAwesomeIcon icon={faTags} />
                       </IconButton>
                     </Tooltip>
                   </div>
@@ -317,6 +292,25 @@ export const SecretInputRow = ({
             </div>
           )}
         </div>
+        <div className={`${hasComment ? "w-8" : "w-0"} overflow-hidden group-hover:w-8`}>
+          <Popover>
+            <PopoverTrigger asChild>
+              <IconButton variant="star" size="xs" ariaLabel="add-tag">
+                <FontAwesomeIcon icon={faComment} />
+              </IconButton>
+            </PopoverTrigger>
+            <PopoverContent className="w-auto">
+              <FormControl label="Comment" className="mb-0">
+                <TextArea
+                  isDisabled={isReadOnly || isRollbackMode || shouldBeBlockedInAddOnly}
+                  {...register(`secrets.${index}.comment`)}
+                  rows={8}
+                  cols={30}
+                />
+              </FormControl>
+            </PopoverContent>
+          </Popover>
+        </div>
         <div className="flex w-0 items-center justify-end space-x-2 overflow-hidden transition-all group-hover:w-16">
           <Tooltip content="delete">
             <IconButton