feat: fit ai chat trigger to center of page

- Updated the CSS classes for the AI assistant bar to adjust positioning based on the new side panel width variable.
- Introduced a new `onWidthPreview` prop in the SidePanelRail component to handle live resizing and update the side panel width dynamically.
- Added width state management in the SidePanelStore to ensure proper width handling during panel interactions.
- Improved layout handling in the course layout component to accommodate the new side panel width adjustments.

apps/dashboard/src/lib/features/side-panel/side-panel-rail.svelte

@@ -5,7 +5,16 @@
   import { t } from '$lib/utils/functions/translations';
   import { sidePanel } from './utils/store.svelte';
 
-  let railShellElement: HTMLDivElement | null = $state(null);
+  interface Props {
+    /**
+     * Live-resize hook. The host writes `--side-panel-width` directly to the
+     * shared shell element so the panel and fixed siblings (e.g. the Ask AI
+     * bar) follow the drag without a per-frame reactivity round-trip.
+     */
+    onWidthPreview?: (width: number) => void;
+  }
+
+  let { onWidthPreview }: Props = $props();
 
   let railWidth = $state(0);
   let isWidthLoaded = $state(false);
@@ -65,6 +74,12 @@
     isWidthLoaded = true;
   });
 
+  // Publish the effective width so the shared ancestor can expose it as a CSS
+  // variable that fixed siblings (e.g. the Ask AI bar) can offset against.
+  $effect(() => {
+    sidePanel.width = activeDefinition ? railWidth : 0;
+  });
+
   $effect(() => {
     if (!isWidthLoaded) return;
 
@@ -100,7 +115,7 @@
       startWidth,
       resolveWidth: ({ startWidth, deltaX }) => clampWidth(startWidth - deltaX),
       onPreview: (width) => {
-        railShellElement?.style.setProperty('--side-panel-width', `${width}px`);
+        onWidthPreview?.(width);
       },
       onCommit: ({ width }) => {
         railWidth = width;
@@ -129,12 +144,7 @@
 
 {#if activeDefinition}
   {@const def = activeDefinition}
-  <div
-    bind:this={railShellElement}
-    data-side-panel-resizing={isRailResizing}
-    class="contents"
-    style={`--side-panel-width: ${railWidth}px;`}
-  >
+  <div data-side-panel-resizing={isRailResizing} class="contents">
     <div class="hidden shrink-0 md:block md:w-(--side-panel-width)"></div>
 
     <aside

apps/dashboard/src/lib/features/side-panel/utils/store.svelte.ts

@@ -5,6 +5,7 @@ class SidePanelStore {
 
   activePanelId = $state<string | null>(null);
   panelProps = $state<Record<string, unknown>>({});
+  width = $state(0);
 
   register(definition: SidePanelDefinition) {
     this.definitions.set(definition.id, definition);
@@ -48,6 +49,7 @@ class SidePanelStore {
   close() {
     this.activePanelId = null;
     this.panelProps = {};
+    this.width = 0;
   }
 
   closeIfScope(scope: SidePanelScope) {