From 85f6e74a5cc0f5a5ccba3747e0d876de6d9743d7 Mon Sep 17 00:00:00 2001
From: AlexandreS <32449369+AlexandreSi@users.noreply.github.com>
Date: Fri, 20 Dec 2024 10:57:46 +0100
Subject: [PATCH] Fix mobile horizontal scroll (#7254)

Don't show in changelog
---
 .../EditorContainers/HomePage/HomePageMenuBar.js     | 12 ++++++------
 .../EditorContainers/HomePage/SectionContainer.js    |  1 +
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/newIDE/app/src/MainFrame/EditorContainers/HomePage/HomePageMenuBar.js b/newIDE/app/src/MainFrame/EditorContainers/HomePage/HomePageMenuBar.js
index f92edcbcf3c8..18f1eeae5c54 100644
--- a/newIDE/app/src/MainFrame/EditorContainers/HomePage/HomePageMenuBar.js
+++ b/newIDE/app/src/MainFrame/EditorContainers/HomePage/HomePageMenuBar.js
@@ -22,19 +22,18 @@ import AuthenticatedUserContext from '../../../Profile/AuthenticatedUserContext'
 import { SECTION_DESKTOP_SPACING } from './SectionContainer';
 
 const iconSize = 20;
-const iconButtonPaddingTop = 8;
+const iconButtonPadding = 8;
 /**
  * Padding bottom is bigger than padding top to leave space for the Android/iOS
  * bottom navigation bar.
  */
-const iconButtonPaddingBottom = 20;
-const iconButtonPaddingHorizontal = 8;
+const iconButtonMarginBottom = 12;
 const iconButtonLabelPadding = 4;
 const toolbarHeight =
   iconSize +
   2 * iconButtonLabelPadding +
-  iconButtonPaddingTop +
-  iconButtonPaddingBottom;
+  2 * iconButtonPadding +
+  iconButtonMarginBottom;
 export const homepageDesktopMenuBarWidth = 230;
 export const homepageMediumMenuBarWidth =
   verticalTabButtonSize + 2 * marginsSize;
@@ -62,7 +61,8 @@ export const styles = {
     marginBottom: 'env(safe-area-inset-bottom)',
   },
   mobileButton: {
-    padding: `${iconButtonPaddingTop}px ${iconButtonPaddingHorizontal}px ${iconButtonPaddingBottom}px ${iconButtonPaddingHorizontal}px`,
+    padding: iconButtonPadding,
+    marginBottom: iconButtonMarginBottom,
     fontSize: 'inherit',
   },
   buttonLabel: { padding: iconButtonLabelPadding, display: 'flex' },
diff --git a/newIDE/app/src/MainFrame/EditorContainers/HomePage/SectionContainer.js b/newIDE/app/src/MainFrame/EditorContainers/HomePage/SectionContainer.js
index 7237f0444955..346315021230 100644
--- a/newIDE/app/src/MainFrame/EditorContainers/HomePage/SectionContainer.js
+++ b/newIDE/app/src/MainFrame/EditorContainers/HomePage/SectionContainer.js
@@ -37,6 +37,7 @@ const styles = {
   },
   container: {
     flex: 1,
+    overflowX: 'hidden',
   },
   scrollContainer: {
     overflowY: 'scroll', // Force a scrollbar to prevent layout shifts.