feat(dashboard): align sms and push phones (#7425)

novuhq · Jan 3, 2025 · 4cdd65b · 4cdd65b
1 parent 6f3951b
commit 4cdd65b
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 7 deletions.
diff --git a/apps/dashboard/src/components/workflow-editor/steps/push/push-preview.tsx b/apps/dashboard/src/components/workflow-editor/steps/push/push-preview.tsx
@@ -99,11 +99,13 @@ export const PushContentContainerPreview = ({ children, className, ...rest }: HT
 
 export const PushBackgroundWithPhone = ({ children, className, ...rest }: HTMLAttributes<HTMLDivElement>) => {
   return (
-    <div
-      className={cn("relative h-60 w-full max-w-72 bg-[url('/images/phones/iphone-push.svg')] bg-cover", className)}
-      {...rest}
-    >
-      {children}
+    <div className="flex items-center justify-center">
+      <div
+        className={cn("relative h-60 w-full max-w-72 bg-[url('/images/phones/iphone-push.svg')] bg-cover", className)}
+        {...rest}
+      >
+        {children}
+      </div>
     </div>
   );
 };

diff --git a/apps/dashboard/src/components/workflow-editor/steps/sms/sms-phone.tsx b/apps/dashboard/src/components/workflow-editor/steps/sms/sms-phone.tsx
@@ -46,7 +46,7 @@ export const SmsPhone = ({
   isLoading?: boolean;
   error?: boolean;
 }) => (
-  <div className="shadow-xs relative h-[200px] max-w-fit overflow-hidden">
+  <div className="shadow-xs relative h-60 w-full max-w-72 overflow-hidden">
     <div className="absolute left-[25px] right-[15px] top-[110px]">
       {isLoading ? (
         <TypingIndicator />

diff --git a/apps/dashboard/src/components/workflow-editor/steps/sms/sms-preview.tsx b/apps/dashboard/src/components/workflow-editor/steps/sms/sms-preview.tsx
@@ -3,7 +3,7 @@ import { ChannelTypeEnum, SmsRenderOutput, type GeneratePreviewResponseDto } fro
 import { ReactNode } from 'react';
 
 const SmsPreviewContainer = ({ children }: { children: ReactNode }) => {
-  return <div className="pt-2">{children}</div>;
+  return <div className="flex items-center justify-center">{children}</div>;
 };
 
 export const SmsPreview = ({