From db75b0eae96a7c140bdde2506dd86e31c1388ea0 Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Fri, 12 Dec 2025 12:46:20 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=93=B1(frontend)=20solve=20recording=20re?=
 =?UTF-8?q?sponsiveness=20issue?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Many public servants use PCs with unusual screen resolutions. The screen
height is often quite small, which caused responsiveness issues on the
vertical axis.

When opening the side panel, they could not see the button to start the
recording. I improved the vertical responsiveness to address this issue and
reduce support requests such as “I cannot see the button”.

Users typically do not think about scrolling inside the side panel, so the
layout now better fits constrained screen heights.
---
 .../components/ScreenRecordingSidePanel.tsx   | 22 +++++++++++++++
 .../components/TranscriptSidePanel.tsx        | 28 +++++++++++++++++++
 2 files changed, 50 insertions(+)

diff --git a/src/frontend/src/features/recording/components/ScreenRecordingSidePanel.tsx b/src/frontend/src/features/recording/components/ScreenRecordingSidePanel.tsx
index 60938779..71d830b7 100644
--- a/src/frontend/src/features/recording/components/ScreenRecordingSidePanel.tsx
+++ b/src/frontend/src/features/recording/components/ScreenRecordingSidePanel.tsx
@@ -131,7 +131,20 @@ export const ScreenRecordingSidePanel = () => {
         alt={''}
         className={css({
           minHeight: '309px',
+          height: '309px',
           marginBottom: '1rem',
+          '@media (max-height: 700px)': {
+            height: 'auto',
+            minHeight: 'auto',
+            maxHeight: '45%',
+            marginBottom: '0.3rem',
+          },
+          '@media (max-height: 530px)': {
+            height: 'auto',
+            minHeight: 'auto',
+            maxHeight: '40%',
+            marginBottom: '0.1rem',
+          },
         })}
       />
 
@@ -148,6 +161,9 @@ export const ScreenRecordingSidePanel = () => {
               textStyle: 'sm',
               marginBottom: '2.5rem',
               marginTop: '0.25rem',
+              '@media (max-height: 700px)': {
+                marginBottom: '1rem',
+              },
             })}
           >
             {t('stop.body')}
@@ -178,6 +194,9 @@ export const ScreenRecordingSidePanel = () => {
                   maxWidth: '90%',
                   marginBottom: '2.5rem',
                   marginTop: '0.25rem',
+                  '@media (max-height: 700px)': {
+                    marginBottom: '1rem',
+                  },
                 })}
               >
                 {t('stopping.body')}
@@ -198,6 +217,9 @@ export const ScreenRecordingSidePanel = () => {
                   maxWidth: '90%',
                   marginBottom: '2.5rem',
                   marginTop: '0.25rem',
+                  '@media (max-height: 700px)': {
+                    marginBottom: '1rem',
+                  },
                 })}
               >
                 {t('start.body', {
diff --git a/src/frontend/src/features/recording/components/TranscriptSidePanel.tsx b/src/frontend/src/features/recording/components/TranscriptSidePanel.tsx
index 6d6e87b1..4731a664 100644
--- a/src/frontend/src/features/recording/components/TranscriptSidePanel.tsx
+++ b/src/frontend/src/features/recording/components/TranscriptSidePanel.tsx
@@ -141,7 +141,20 @@ export const TranscriptSidePanel = () => {
         alt={''}
         className={css({
           minHeight: '309px',
+          height: '309px',
           marginBottom: '1rem',
+          '@media (max-height: 700px)': {
+            height: 'auto',
+            minHeight: 'auto',
+            maxHeight: '45%',
+            marginBottom: '0.3rem',
+          },
+          '@media (max-height: 530px)': {
+            height: 'auto',
+            minHeight: 'auto',
+            maxHeight: '40%',
+            marginBottom: '0.1rem',
+          },
         })}
       />
       {!hasTranscriptAccess ? (
@@ -157,6 +170,9 @@ export const TranscriptSidePanel = () => {
                   textStyle: 'sm',
                   marginBottom: '2.5rem',
                   marginTop: '0.25rem',
+                  '@media (max-height: 700px)': {
+                    marginBottom: '1rem',
+                  },
                 })}
               >
                 {t('notAdminOrOwner.body')}
@@ -182,6 +198,9 @@ export const TranscriptSidePanel = () => {
                   textStyle: 'sm',
                   marginBottom: '2.5rem',
                   marginTop: '0.25rem',
+                  '@media (max-height: 700px)': {
+                    marginBottom: '1rem',
+                  },
                 })}
               >
                 {t('beta.body')}{' '}
@@ -222,6 +241,9 @@ export const TranscriptSidePanel = () => {
                   textStyle: 'sm',
                   marginBottom: '2.5rem',
                   marginTop: '0.25rem',
+                  '@media (max-height: 700px)': {
+                    marginBottom: '1rem',
+                  },
                 })}
               >
                 {t('stop.body')}
@@ -252,6 +274,9 @@ export const TranscriptSidePanel = () => {
                       maxWidth: '90%',
                       marginBottom: '2.5rem',
                       marginTop: '0.25rem',
+                      '@media (max-height: 700px)': {
+                        marginBottom: '1rem',
+                      },
                     })}
                   >
                     {t('stopping.body')}
@@ -272,6 +297,9 @@ export const TranscriptSidePanel = () => {
                       maxWidth: '90%',
                       marginBottom: '2.5rem',
                       marginTop: '0.25rem',
+                      '@media (max-height: 700px)': {
+                        marginBottom: '1rem',
+                      },
                     })}
                   >
                     {t('start.body', {