Merge pull request #241 from ynput/fix/long_project_names_in_sidebar

Auto-expand project sidebar if project name is too long

Author: martastain

src/components/Menu/MenuComponents/Menu.styled.js

@@ -137,6 +137,10 @@ export const Item = styled.li`
   position: relative;
   user-select: none;
 
+  span {
+    display: inline-block;
+  }
+
   :hover {
     background-color: var(--md-sys-color-surface-container-highest);
   }

src/components/ProjectButton/ProjectButton.jsx

@@ -9,7 +9,7 @@ const ProjectButton = ({ label, code, onPin, onEdit, className, highlighted, ...
       tabIndex={0}
       className={`${className} ${highlighted ? 'highlighted' : ''}`}
     >
-      <span>{label}</span>
+      <span style={{ marginRight: 8 }}>{label}</span>
       {/* code hides on hover */}
       {code && <span className="code">{code}</span>}
       {/* hover buttons */}

src/styles/index.scss

@@ -756,8 +756,12 @@ a {
   }
 }
 
-
 .broken-addon-row {
   color: red !important;
   font-style: italic;
 }
+
+.p-sidebar-left .p-sidebar {
+  min-width: 20rem;
+  width: auto;
+}