fix(js): toggle d-none for fullscreen icons instead of inline display (#6021)

The fullscreen plugin was setting iconMaximize.style.display = 'block'
and 'none' directly. Hardcoding 'block' overrode whatever display value
the icon library uses naturally -- Bootstrap Icons happen to be inline
(so the bug was invisible by default) but FontAwesome uses inline-block,
and the forced 'block' shifted the icon position after the first click.

Switches the plugin to toggle Bootstrap's .d-none utility class, which
preserves the icon library's own display value:

  // before
  iconMaximize.style.display = 'block'
  iconMinimize.style.display = 'none'

  // after
  iconMaximize.classList.remove('d-none')
  iconMinimize.classList.add('d-none')

Updates the topbar markup and the documentation snippet to match: the
initial-hidden minimize icon now uses class="d-none" instead of
style="display: none;" so the JS toggle is symmetric.

Works correctly across any icon library.

src/html/components/dashboard/_topbar.astro

@@ -161,7 +161,7 @@ const deploymentPath = depth === 0 ? './' : '../'.repeat(depth);
       <li class="nav-item">
         <a class="nav-link" href="#" data-lte-toggle="fullscreen">
           <i data-lte-icon="maximize" class="bi bi-arrows-fullscreen"></i>
-          <i data-lte-icon="minimize" class="bi bi-fullscreen-exit" style="display: none;"></i>
+          <i data-lte-icon="minimize" class="bi bi-fullscreen-exit d-none"></i>
         </a>
       </li>
       <!--end::Fullscreen Toggle-->

src/html/components/javascript/fullscreen.mdx

@@ -11,7 +11,7 @@ Add `data-lte-toggle="fullscreen"` to a button element. Use `data-lte-icon="maxi
 ```html
 <button type="button" class="btn" data-lte-toggle="fullscreen">
   <i data-lte-icon="maximize" class="bi bi-arrows-fullscreen"></i>
-  <i data-lte-icon="minimize" class="bi bi-fullscreen-exit" style="display: none"></i>
+  <i data-lte-icon="minimize" class="bi bi-fullscreen-exit d-none"></i>
 </button>
 ```
 

src/ts/fullscreen.ts

@@ -44,12 +44,16 @@ class FullScreen {
 
     void document.documentElement.requestFullscreen()
 
+    // Toggle Bootstrap's .d-none utility instead of hardcoding inline
+    // display:block. The previous approach overrode the icon library's
+    // natural display value (eg. some icon fonts use inline-block) and
+    // caused the icon to shift its position. Fixes #6021.
     if (iconMaximize) {
-      iconMaximize.style.display = 'none'
+      iconMaximize.classList.add('d-none')
     }
 
     if (iconMinimize) {
-      iconMinimize.style.display = 'block'
+      iconMinimize.classList.remove('d-none')
     }
 
     this._element.dispatchEvent(event)
@@ -64,11 +68,11 @@ class FullScreen {
     void document.exitFullscreen()
 
     if (iconMaximize) {
-      iconMaximize.style.display = 'block'
+      iconMaximize.classList.remove('d-none')
     }
 
     if (iconMinimize) {
-      iconMinimize.style.display = 'none'
+      iconMinimize.classList.add('d-none')
     }
 
     this._element.dispatchEvent(event)