fix(block-section): wraps long text over to a new line when toggle sw…

…itch is displayed (#8101)

**Related Issue:** #7698 

## Summary

Wraps long text to a new line when `toggle-display='switch'`

packages/calcite-components/src/components/block-section/block-section.scss

@@ -62,6 +62,7 @@
 
 .toggle--switch-container {
   @apply flex items-center relative bg-transparent w-full;
+  word-break: break-word;
 
   .focus-guard {
     --calcite-label-margin-bottom: 0;
@@ -89,4 +90,10 @@
   color: theme("colors.danger");
 }
 
+:host([toggle-display="switch"]) .toggle {
+  .toggle--switch__content {
+    @apply me-7;
+  }
+}
+
 @include base-component();

packages/calcite-components/src/components/block/block.stories.ts

@@ -312,3 +312,15 @@ export const scrollingContainerSetup_TestOnly = (): string => html`<style>
   </script>`;
 
 scrollingContainerSetup_TestOnly.parameters = { chromatic: { delay: 500 } };
+
+export const toggleDisplayWithLongText_TestOnly = (): string => html`<calcite-block
+  open
+  heading="Calcite block"
+  style="width:150px"
+>
+  <calcite-block-section id="block-section" open text="Calcite block superlongggggtext" toggle-display="switch">
+    <calcite-notice open>
+      <div slot="message">Some more complex options.</div>
+    </calcite-notice>
+  </calcite-block-section>
+</calcite-block>`;