fix sidebar styling on mobile (#1194)

conorriches · Conor · loiswells97 · web-flow · commit 507187b06032 · 2025-04-22T14:24:49.000+01:00
Related To https://github.com/RaspberryPiFoundation/digital-editor-issues/issues/419 ## Bug <img width="319" alt="image" src="https://github.com/user-attachments/assets/81f65dbf-33cb-4558-a8ca-7f7d302688ac" /> --------- Co-authored-by: Conor <conor.riches@raspberrypi.org> Co-authored-by: Lois Wells <88904316+loiswells97@users.noreply.github.com>
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -10,6 +10,9 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
  
 - Fake translation for stress testing (#1206)
 
+### Fixed
+- Styling issue on sidebar on mobile (#1194)
+
 ## [0.30.0] - 2025-04-15
 
 ### Added
diff --git a/src/assets/stylesheets/Sidebar.scss b/src/assets/stylesheets/Sidebar.scss
@@ -10,8 +10,13 @@
 }
 
 .sidebar--mobile {
+  block-size: 100%;
   inline-size: 100%;
   overflow-y: hidden;
+
+  .react-tabs .react-tabs__tab-list {
+    flex: unset;
+  }
 }
 
 .editor-logo {

Original file line number	Diff line number	Diff line change
`@@ -10,8 +10,13 @@`
`10`	`10`	`}`
`11`	`11`
`12`	`12`	`.sidebar--mobile {`
	`13`	`+ block-size: 100%;`
`13`	`14`	`inline-size: 100%;`
`14`	`15`	`overflow-y: hidden;`
	`16`	`+`
	`17`	`+ .react-tabs .react-tabs__tab-list {`
	`18`	`+ flex: unset;`
	`19`	`+ }`
`15`	`20`	`}`
`16`	`21`
`17`	`22`	`.editor-logo {`