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', {