fix(alert): add max-w property to make alert responsive

nextui-org · Oct 16, 2024 · 427c4fe · 427c4fe
1 parent 22c6a51
commit 427c4fe
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 5 deletions.
diff --git a/packages/components/alert/stories/alert.stories.tsx b/packages/components/alert/stories/alert.stories.tsx
@@ -41,11 +41,15 @@ const defaultProps = {
   description: "You will get a reply soon",
 };
 
-const Template = (args) => <Alert {...args} />;
+const Template = (args) => (
+  <div className="w-full">
+    <Alert {...args} />
+  </div>
+);
 
 const ColorTemplate = (args) => {
   return (
-    <div className="flex flex-col">
+    <div className="flex flex-col w-full">
       {["default", "primary", "secondary", "success", "warning", "danger"].map((color) => (
         <div key={color} className="w-full flex justify-between items-center my-3">
           <span className="mx-4 text-md">{color}</span>
@@ -58,7 +62,7 @@ const ColorTemplate = (args) => {
 
 const RadiusTemplate = (args) => {
   return (
-    <div className="flex flex-col">
+    <div className="flex flex-col w-full">
       {["none", "sm", "md", "lg", "full"].map((radius) => (
         <div key={radius} className="w-full flex justify-between items-center my-3">
           <span className="mx-4 text-md">{radius}</span>

diff --git a/packages/core/theme/src/components/alert.ts b/packages/core/theme/src/components/alert.ts
@@ -22,10 +22,10 @@ import {tv} from "../utils/tv";
  */
 const alert = tv({
   slots: {
-    base: ["flex flex-row w-[260px] sm:w-[342px] h-17  p-3"],
+    base: ["flex flex-row max-w-[342px] h-17  p-3"],
     title: ["text-medium font-normal block h-6"],
     description: ["text-small font-normal h-5"],
-    mainWrapper: ["sm:w-[268px] w-[186px] h-11 ms-5 flex flex-col box-border items-start"],
+    mainWrapper: ["max-w-[268px] h-11 ms-5 flex flex-col box-border items-start"],
     closeButton: ["w-6 h-6 cursor-pointer relative"],
     closeIcon: ["fill-current"],
   },