Banner block schema and tailwind conflict fix

packages/volto-banner-block/news/+fixBlockWidthHighlight.bugfix

@@ -0,0 +1 @@
+Fix the block width highlight bug @Tishasoumya-02

packages/volto-banner-block/news/+fixTailwindContainerConflict.bugfix

@@ -0,0 +1 @@
+Neutralize the Tailwind `container` utility max-width caps on the banner wrapper, so the banner follows its block width. @Tishasoumya-02

packages/volto-banner-block/src/components/schema.jsx

@@ -1,7 +1,6 @@
 import { defineMessages } from 'react-intl';
-import { addStyling } from '@plone/volto/helpers/Extensions/withBlockSchemaEnhancer';
 import config from '@plone/volto/registry';
-
+import { addStyling } from '@plone/volto/helpers/Extensions/withBlockSchemaEnhancer';
 const messages = defineMessages({
   Banner: {
     id: 'Banner',
@@ -83,13 +82,11 @@ export const BannerBlockSchema = (props) => {
     'blockWidth:noprefix',
     ...schema.properties.styles.schema.fieldsets[0].fields,
   ];
-
   schema.properties.styles.schema.properties['blockWidth:noprefix'] = {
     widget: 'blockWidth',
     title: intl.formatMessage(messages.BlockWidth),
     default: 'layout',
-    filterActions: ['layout', 'full'],
-    actions: config.blocks.widths,
+    actions: config.blocks.widths.map((width) => width.name),
   };
 
   return schema;

packages/volto-banner-block/src/theme/main.scss

@@ -1,5 +1,10 @@
 .banner.container {
+  // Tailwind's generic `container` utility caps max-width per breakpoint.
+  // The banner width is driven by `--block-width`, so neutralize it.
+  // Remove when CSS layers are resolved later
   display: grid;
+  width: 100%;
+  max-width: none;
   grid-template-columns: 1fr;
   grid-template-rows: 300px;