🐛(frontend) proxy /media requests to nginx

When running the build image with docker compose we need to proxy
incoming /media request to nginx so that background images can be
properly served.

We didn't have the issue with local dev with vite as vite is
configured to do the proxy.
Nor do we have the issue with tilt as medias are served directly.

We need this because if the background image are hosted on another
domain, by default (and that's to be fix in LiveKit), request
to get the image don't have auth headers so they get rejected.

CHANGELOG.md

@@ -8,6 +8,15 @@ and this project adheres to
 
 ## [Unreleased]
 
+### Changed
+
+- ♿️(frontend) fix sidepanel accessibility aria-label #1182
+- ♿️(frontend) fix more tools heading hierarchy #1181
+
+### Fixed
+
+- 🐛(frontend) redirect /media requests to nginx #1186
+
 ## [1.11.0] - 2026-03-19
 
 ### Added

src/frontend/default.conf

@@ -11,6 +11,16 @@ server {
       add_header Content-Disposition "attachment; filename=windows-app-web-link";
   }
 
+  # Proxy media requests received by the frontend to the nginx server
+   location /media {
+      proxy_pass http://nginx:8083;
+      proxy_http_version 1.1;
+      proxy_set_header Host $host;
+      proxy_set_header X-Real-IP $remote_addr;
+      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+      proxy_set_header X-Forwarded-Proto $scheme;
+   }
+
   # Serve static files with caching
   location ~* ^/assets/.*\.(css|js|json|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
       expires 30d;

src/frontend/src/features/rooms/livekit/components/SidePanel.tsx

@@ -149,11 +149,12 @@ export const SidePanel = () => {
     activeSubPanelId,
   } = useSidePanel()
   const { t } = useTranslation('rooms', { keyPrefix: 'sidePanel' })
+  const title = t(`heading.${activeSubPanelId || activePanelId}`)
 
   return (
     <StyledSidePanel
-      title={t(`heading.${activeSubPanelId || activePanelId}`)}
-      ariaLabel={t('ariaLabel')}
+      title={title}
+      ariaLabel={t('ariaLabel', { title })}
       onClose={() => {
         layoutStore.activePanelId = null
         layoutStore.activeSubPanelId = null

src/frontend/src/features/rooms/livekit/components/Tools.tsx

@@ -65,7 +65,7 @@ const ToolButton = ({
       <div>
         <Text
           margin={false}
-          as="h3"
+          as="h2"
           className={css({
             display: 'flex',
             gap: 0.25,

src/frontend/src/locales/de/rooms.json

@@ -319,7 +319,7 @@
     }
   },
   "sidePanel": {
-    "ariaLabel": "Seitenleiste",
+    "ariaLabel": "Seitenleiste - {{title}}",
     "backToTools": "Zurück zu den Meeting-Tools",
     "heading": {
       "participants": "Teilnehmende",

src/frontend/src/locales/en/rooms.json

@@ -318,7 +318,7 @@
     }
   },
   "sidePanel": {
-    "ariaLabel": "Sidepanel",
+    "ariaLabel": "Sidepanel - {{title}}",
     "backToTools": "Back to meeting tools",
     "heading": {
       "participants": "Participants",

src/frontend/src/locales/fr/rooms.json

@@ -318,7 +318,7 @@
     }
   },
   "sidePanel": {
-    "ariaLabel": "Panneau latéral",
+    "ariaLabel": "Panneau latéral - {{title}}",
     "backToTools": "Retour aux outils de réunion",
     "heading": {
       "participants": "Participants",

src/frontend/src/locales/nl/rooms.json

@@ -318,7 +318,7 @@
     }
   },
   "sidePanel": {
-    "ariaLabel": "Zijbalk",
+    "ariaLabel": "Zijbalk - {{title}}",
     "backToTools": "Terug naar vergadertools",
     "heading": {
       "participants": "Deelnemers",