WIP

odigos-io · Aug 1, 2023 · 61fc2fc · 61fc2fc
1 parent 97e1983
commit 61fc2fc
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 17 deletions.
diff --git a/frontend/webapp/components/setup/destination/destination.card/destination.card.styled.tsx b/frontend/webapp/components/setup/destination/destination.card/destination.card.styled.tsx
@@ -10,7 +10,9 @@ export const DestinationCardWrapper = styled.div`
 `;
 
 export const ApplicationNameWrapper = styled.div`
-  display: inline-block;
+  display: flex;
+  align-items: center;
   text-overflow: ellipsis;
   max-width: 224px;
+  height: 40px;
 `;
diff --git a/frontend/webapp/components/setup/destination/destination.card/destination.card.tsx b/frontend/webapp/components/setup/destination/destination.card/destination.card.tsx
@@ -8,9 +8,8 @@ import {
 } from "./destination.card.styled";
 
 const TEXT_STYLE: React.CSSProperties = {
-  textOverflow: "ellipsis",
-  whiteSpace: "nowrap",
-  overflow: "hidden",
+  overflowWrap: "break-word",
+  textAlign: "center",
 };
 const LOGO_STYLE: React.CSSProperties = { padding: 4, backgroundColor: "#fff" };
 const TAP_STYLE: React.CSSProperties = { padding: "4px 8px", gap: 4 };

diff --git a/frontend/webapp/components/setup/sources/source.card/source.card.styled.tsx b/frontend/webapp/components/setup/sources/source.card/source.card.styled.tsx
@@ -11,18 +11,15 @@ export const SourceCardWrapper = styled.div`
   display: flex;
   align-items: center;
   flex-direction: column;
-  /* gap: 14px; */
+  gap: 14px;
   cursor: pointer;
   .p {
     cursor: pointer !important;
   }
 `;
 
 export const ApplicationNameWrapper = styled.div`
-  display: flex;
-  text-align: center;
-  justify-content: center;
-  align-items: center;
-  height: 60px;
+  display: inline-block;
+  text-overflow: ellipsis;
   max-width: 224px;
 `;
diff --git a/frontend/webapp/components/setup/sources/source.card/source.card.tsx b/frontend/webapp/components/setup/sources/source.card/source.card.tsx
@@ -15,7 +15,9 @@ import { SETUP } from "@/utils/constants";
 import { KIND_COLORS } from "@/styles/global";
 
 const TEXT_STYLE = {
-  overflowWrap: "break-word",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap",
+  overflow: "hidden",
 };
 
 export function SourceCard({ item, onClick, focus }: any) {
@@ -27,12 +29,8 @@ export function SourceCard({ item, onClick, focus }: any) {
       <SourceCardWrapper onClick={onClick}>
         <Logo />
         <ApplicationNameWrapper>
-          <KeyvalText
-            size={item?.name?.length > 20 ? 16 : 20}
-            weight={700}
-            style={TEXT_STYLE}
-          >
-            {item?.name}
+          <KeyvalText size={20} weight={700} style={TEXT_STYLE}>
+            {item.name}
           </KeyvalText>
         </ApplicationNameWrapper>
         <KeyvalTag