fix(js): Truncate workflow name and center empty notifications text (#…

…7123)
novuhq · Nov 25, 2024 · f33b165 · f33b165
1 parent edff9bd
commit f33b165
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 7 deletions.
diff --git a/packages/js/src/ui/components/Notification/NotificationList.tsx b/packages/js/src/ui/components/Notification/NotificationList.tsx
@@ -21,7 +21,7 @@ const EmptyNotificationList = () => {
       )}
     >
       <EmptyIcon class={style('notificationListEmptyNoticeIcon')} />
-      <p class={style('notificationListEmptyNotice')} data-localization="notifications.emptyNotice">
+      <p class={(style('notificationListEmptyNotice'), 'nt-text-center')} data-localization="notifications.emptyNotice">
         {t('notifications.emptyNotice')}
       </p>
     </div>

diff --git a/packages/js/src/ui/components/elements/Preferences/Preferences.tsx b/packages/js/src/ui/components/elements/Preferences/Preferences.tsx
@@ -148,17 +148,14 @@ const PreferencesRow = (props: {
         <div
           class={style(
             'workflowLabelContainer',
-            'nt-flex nt-justify-between nt-flex-nowrap nt-self-stretch nt-cursor-pointer nt-items-center'
+            'nt-flex nt-justify-between nt-flex-nowrap nt-self-stretch nt-cursor-pointer nt-items-center nt-overflow-hidden'
           )}
           onClick={() => setIsOpen((prev) => !prev)}
           data-open={isOpen()}
         >
-          <div>
+          <div class={style('workflowLabelHeader', 'nt-overflow-hidden')}>
             <div
-              class={style(
-                'workflowLabel',
-                'nt-text-base nt-font-semibold nt-text-start nt-flex nt-items-center nt-gap-1'
-              )}
+              class={style('workflowLabel', 'nt-text-base nt-font-semibold nt-truncate')}
               data-localization={props.localizationKey}
               data-open={isOpen()}
             >

diff --git a/packages/js/src/ui/config/appearanceKeys.ts b/packages/js/src/ui/config/appearanceKeys.ts
@@ -111,6 +111,7 @@ export const appearanceKeys = [
   // workflow
   'workflowContainer',
   'workflowLabel',
+  'workflowLabelHeader',
   'workflowLabelContainer',
   'workflowContainerDisabledNotice',
   'workflowLabelDisabled__icon',