fix(bulma-ui): keep a Notification's text clear of its close button

bestax-mcp/data/catalog.json

@@ -2007,6 +2007,7 @@
     "--bulma-notification-background-l": ["Notification"],
     "--bulma-notification-code-background-color": ["Notification"],
     "--bulma-notification-color-l": ["Notification"],
+    "--bulma-notification-delete-padding-inline-end": ["Notification"],
     "--bulma-notification-h": ["Notification"],
     "--bulma-notification-padding": ["Notification"],
     "--bulma-notification-radius": ["Notification"],

bestax-mcp/data/components/Notification.json

@@ -89,7 +89,7 @@
           "name": "hasDelete",
           "type": "boolean",
           "default": "false",
-          "description": "Shows a close (delete) button in the notification. It renders `type=\"button\"`, so it does not submit a form around it.",
+          "description": "Shows a close (delete) button in the notification. It renders `type=\"button\"`, so it does not submit a form around it. The notification also takes `has-delete`, which pads its end by `--bulma-notification-delete-padding-inline-end` so the text clears the button. That rule ships in bestax's stylesheets, not Bulma's, so an app styled by Bulma's CSS alone keeps Bulma's padding.",
           "required": false,
           "inherited": false,
           "deprecated": false
@@ -119,6 +119,12 @@
     }
   ],
   "cssVars": [
+    {
+      "css": "--bulma-notification-delete-padding-inline-end",
+      "sass": "$notification-delete-padding-inline-end",
+      "default": "calc(1rem + 1.25rem + 0.75rem)",
+      "scope": "root"
+    },
     {
       "css": "--bulma-notification-h",
       "sass": null,

bestax-mcp/data/skills.json

@@ -162,7 +162,7 @@
         {
           "id": "modular-build",
           "file": "references/modular-build.md",
-          "bytes": 9583
+          "bytes": 10113
         }
       ],
       "examples": []
@@ -176,7 +176,7 @@
         {
           "id": "css-variables",
           "file": "references/css-variables.md",
-          "bytes": 29396
+          "bytes": 29872
         },
         {
           "id": "themeable-components",

bulma-ui/src/elements/Notification.stories.tsx

@@ -7,6 +7,8 @@ import {
   notification,
 } from './Notification';
 import { Button } from './Button';
+import { Columns } from '../columns/Columns';
+import { Column } from '../columns/Column';
 
 // Separate component for dismissible notification to comply with react-hooks/rules-of-hooks
 const DismissibleNotification: React.FC<NotificationProps> = props => {
@@ -167,6 +169,25 @@ export const WithDelete: Story = {
   },
 };
 
+/**
+ * On a narrow column the text wraps before the close button rather than
+ * running under it.
+ */
+export const WithDeleteInANarrowColumn: Story = {
+  render: (args: NotificationProps) => (
+    <Columns>
+      <Column size="one-third">
+        <DismissibleNotification {...args} />
+      </Column>
+    </Columns>
+  ),
+  args: {
+    color: 'info',
+    children:
+      'Your changes were saved, and everyone on the project can see them now.',
+  },
+};
+
 export const WithMargin: Story = {
   args: {
     children: 'This notification has a margin.',

bulma-ui/src/elements/Notification.tsx

@@ -44,6 +44,11 @@ export interface NotificationProps
   /**
    * Shows a close (delete) button in the notification. It renders
    * `type="button"`, so it does not submit a form around it.
+   *
+   * The notification also takes `has-delete`, which pads its end by
+   * `--bulma-notification-delete-padding-inline-end` so the text clears the
+   * button. That rule ships in bestax's stylesheets, not Bulma's, so an app
+   * styled by Bulma's CSS alone keeps Bulma's padding.
    */
   hasDelete?: boolean;
   /** Callback fired when the delete button is clicked. */
@@ -83,6 +88,7 @@ export const Notification: React.FC<NotificationProps> = ({
   const bulmaClasses = usePrefixedClassNames('notification', {
     [`is-${color}`]: color && validColors.includes(color),
     'is-light': isLight,
+    'has-delete': hasDelete,
   });
 
   const deleteClasses = usePrefixedClassNames('delete');