Safari alignment of icons buttons and fields broken in stg (#337)

# What's Changed?

- Fixing `svg` alignment issue in Safari. This was caused by the
`min-width: min-content` rule on `svg`s put in place to prevent `svg`s
shrinking when there is less space. Instead of this, the `svg` that was
shrinking was wrapped in an extra `div`.

## Screenshots

### Before
<img width="1323" alt="Screenshot 2023-01-16 at 16 30 03"
src="https://user-images.githubusercontent.com/88904316/212726240-ec53e623-f0dc-4457-bed0-afee511f478b.png">

### After
<img width="1323" alt="Screenshot 2023-01-16 at 16 31 03"
src="https://user-images.githubusercontent.com/88904316/212726392-0292c7f2-c843-4847-b032-bef49a510e06.png">

closes #332

Co-authored-by: loiswells97 <loiswells97@users.noreply.github.com>
Co-authored-by: Lois Wells <lois.wells@raspberrypi.org>
Co-authored-by: Lois Wells <88904316+loiswells97@users.noreply.github.com>

CHANGELOG.md

@@ -20,7 +20,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 ### Changed
 
 - Change port number to fix 'no consent token' error (#326)
-- Long file names truncated rather than scrolling in left hand file pane (#316)
+- Long file names truncated rather than scrolling in left hand file pane (#316, #337)
 - Tab scrollbars only appear when necessary (#331)
 
 ### Fixed

src/App.scss

@@ -10,10 +10,6 @@ a {
   }
 }
 
-svg {
-  min-width: min-content;
-}
-
 button {
   all: initial;
   border: 3px solid transparent;

src/components/Menus/SideMenu/FilePane/FilesList.js

@@ -25,7 +25,9 @@ const FilesList = (props) => {
       <div className='files-list'>
       { project.components.map((file, i) => (
         <div className='files-list-item' key={i} onClick={() => openFileTab(`${file.name}.${file.extension}`)}>
-          <FileIcon />
+          <div className='files-list-icon'>
+            <FileIcon />
+          </div>
           <span className='files-list-item__name'>{file.name}.{file.extension}</span>
           {(file.name === 'main' && file.extension === 'py') ? null :
             <div className='files-list-item__menu'>

src/components/WebComponent/WebComponent.scss

@@ -21,10 +21,6 @@ button {
   font-size: inherit;
 }
 
-svg {
-  min-width: min-content;
-}
-
 .--dark {
   background-color: $rpf-darkmode-grey10;
   color: $rpf-white;