fix: resolved delete button invisible issue #2164

awslabs · Dec 5, 2023 · 3ec8743 · 3ec8743
1 parent 149ec60
commit 3ec8743
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 6 deletions.
diff --git a/packages/dashboard/src/components/widgets/tile/tile.css b/packages/dashboard/src/components/widgets/tile/tile.css
@@ -14,3 +14,17 @@
   width: 100%;
   height: 2px;
 }
+
+.widget-tile-header {
+  overflow: hidden;
+}
+
+.widget-tile-header h1 {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.tile-button-contianer {
+  display: flex;
+}
diff --git a/packages/dashboard/src/components/widgets/tile/tile.tsx b/packages/dashboard/src/components/widgets/tile/tile.tsx
@@ -2,7 +2,6 @@ import React, { PropsWithChildren, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 
 import Box from '@cloudscape-design/components/box';
-import SpaceBetween from '@cloudscape-design/components/space-between';
 import Button from '@cloudscape-design/components/button';
 import {
   colorBorderDividerDefault,
@@ -100,10 +99,12 @@ const WidgetTile: React.FC<WidgetTileProps> = ({ children, widget, title, remove
             borderBottom: `2px solid ${colorBorderDividerDefault}`,
           }}
         >
-          <Box variant='h1' fontSize='body-m'>
-            {title}
-          </Box>
-          <SpaceBetween size='s' direction='horizontal'>
+          <div className='widget-tile-header' title={title}>
+            <Box variant='h1' fontSize='body-m'>
+              {title}
+            </Box>
+          </div>
+          <div className='tile-button-contianer'>
             {iotSiteWiseClient && widget.type !== 'text' && (
               <CSVDownloadButton
                 client={iotSiteWiseClient}
@@ -132,7 +133,7 @@ const WidgetTile: React.FC<WidgetTileProps> = ({ children, widget, title, remove
               handleCancel={handleCloseModal}
               handleSubmit={handleSubmit}
             />
-          </SpaceBetween>
+          </div>
         </div>
       )}
       <div className='widget-tile-body'>{children}</div>