fix: node detail description & icons issues

aleph-im · Dec 7, 2023 · 788daf3 · 788daf3
1 parent 7819952
commit 788daf3
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 19 deletions.
diff --git a/src/components/common/NodeDetailEditableField/cmp.tsx b/src/components/common/NodeDetailEditableField/cmp.tsx
@@ -101,21 +101,21 @@ export const NodeDetailEditableField = memo(
             {...rest}
           />
         ) : (
-          <>{children ? children : value || 'NONE'}</>
+          <div tw="max-w-full text-ellipsis overflow-hidden whitespace-nowrap">
+            {children ? children : value || 'NONE'}
+          </div>
         )}
         {isOwner && (
           <div
-            tw="flex justify-end"
+            tw="shrink-0 flex justify-end overflow-hidden"
             css={{
-              width: '1.75rem',
               maxWidth: isEditing ? '0' : '1.75rem',
               transition: 'max-width ease-in-out 0.25s 0s',
-              overflow: 'hidden',
             }}
           >
             <Icon
               name="edit"
-              tw="cursor-pointer w-4 h-4"
+              tw="cursor-pointer ml-3 w-3.5 h-3.5"
               onClick={handleEditClick}
             />
           </div>

diff --git a/src/components/common/NodeDetailHeader/cmp.tsx b/src/components/common/NodeDetailHeader/cmp.tsx
@@ -83,17 +83,16 @@ export const NodeDetailHeader = memo(
             />
           </StyledTitle>
         </StyledContainer>
-        {descriptionCtrl.field.value ||
-          (isOwner && (
-            <StyledDescription>
-              <NodeDetailEditableField
-                {...descriptionCtrl.field}
-                {...descriptionCtrl.fieldState}
-                placeholder="description"
-                isOwner={isOwner}
-              />
-            </StyledDescription>
-          ))}
+        {(descriptionCtrl.field.value || isOwner) && (
+          <StyledDescription>
+            <NodeDetailEditableField
+              {...descriptionCtrl.field}
+              {...descriptionCtrl.fieldState}
+              placeholder="description"
+              isOwner={isOwner}
+            />
+          </StyledDescription>
+        )}
       </div>
     )
   },

diff --git a/src/components/common/NodeDetailHeader/styles.tsx b/src/components/common/NodeDetailHeader/styles.tsx
@@ -70,7 +70,7 @@ export const StyledContainer = styled.div<StyledContainerProps>`
 export const StyledTitle = styled.h1.attrs(addClasses('tp-h5'))`
   ${({ theme }) => {
     return css`
-      ${tw`w-full text-ellipsis overflow-hidden whitespace-nowrap m-0 py-0.5 px-6 z-10`}
+      ${tw`m-0 py-0.5 px-6 z-10`}
       color: ${theme.color.text};
       /* background-color: ${theme.color.base1}19; */
       background-color: ${theme.color.base1}E5;
@@ -81,7 +81,7 @@ export const StyledTitle = styled.h1.attrs(addClasses('tp-h5'))`
 export const StyledDescription = styled.h2.attrs(addClasses('tp-body3'))`
   ${({ theme }) => {
     return css`
-      ${tw`w-full text-ellipsis overflow-hidden whitespace-nowrap m-0 py-3 px-6`}
+      ${tw`m-0 py-3 px-6`}
       color: ${theme.color.text};
     `
   }};

diff --git a/src/components/common/NodeDetailLink/cmp.tsx b/src/components/common/NodeDetailLink/cmp.tsx
@@ -26,7 +26,9 @@ export const NodeDetailLink = memo(
             tw="flex items-center w-full"
           >
             {content}
-            {!isOwner && <Icon tw="ml-2" name="external-link-square-alt" />}
+            {!isOwner && (
+              <Icon tw="ml-3 w-3.5 h-3.5" name="external-link-square-alt" />
+            )}
           </Link>
         ) : (
           <span tw="flex items-center w-full">{content}</span>