From 8d154b48b8d92ca051fd27b45e81a8b8bd43fe7b Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Tue, 16 May 2023 20:32:57 +0530
Subject: [PATCH] chore: fix alert max-width

---
 packages/styles/src/Alert/Alert.ts | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/styles/src/Alert/Alert.ts b/packages/styles/src/Alert/Alert.ts
index 8d796f117..fcb7dc2e1 100644
--- a/packages/styles/src/Alert/Alert.ts
+++ b/packages/styles/src/Alert/Alert.ts
@@ -111,14 +111,16 @@ export class SKAlert {
           </button>
          </div>`
       : ''
-    const messageTemplate = this.text ? `<p class='sk-p text-base lg:text-sm'>${this.text}</p>` : ''
+    const messageTemplate = this.text
+      ? `<p class='sk-p text-base lg:text-sm' style="max-width: 100%; overflow: hidden; text-overflow: ellipsis;">${this.text}</p>`
+      : ''
 
     const template = `
       <div class="sk-modal">
         <div class="sk-modal-background"></div>
         <div class="sk-modal-content">
           <div class="sn-component">
-            <div class="sk-panel" style='max-width: 500px;'>
+            <div class="sk-panel" style='max-width: min(95vw, 500px);'>
               <div class="sk-panel-content" ${panelStyle}>
                 <div class="sk-panel-section">
                   ${titleTemplate}