Slightly increase width of side panels and add expandable toggle for component tab

packages/builder/src/components/design/navigation/NavigationPanel.svelte

@@ -4,9 +4,11 @@
   export let title
   export let showAddButton = false
   export let showBackButton = false
+  export let showExpandIcon = false
   export let onClickAddButton
   export let onClickBackButton
-  export let wide = false
+
+  let wide = false
 </script>
 
 <div class="navigation-panel" class:wide>
@@ -17,6 +19,13 @@
     <div class="title">
       <Heading size="XS">{title || ""}</Heading>
     </div>
+    {#if showExpandIcon}
+      <Icon
+        name={wide ? "Minimize" : "Maximize"}
+        hoverable
+        on:click={() => (wide = !wide)}
+      />
+    {/if}
     {#if showAddButton}
       <div class="add-button" on:click={onClickAddButton}>
         <Icon name="Add" />
@@ -30,16 +39,17 @@
 
 <style>
   .navigation-panel {
-    width: 260px;
+    width: 280px;
     background: var(--background);
     border-right: var(--border-light);
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
     align-items: stretch;
+    transition: width 130ms ease-out;
   }
   .navigation-panel.wide {
-    width: 360px;
+    width: 420px;
   }
   .header {
     flex: 0 0 48px;

packages/builder/src/components/design/settings/SettingsPanel.svelte

@@ -23,7 +23,7 @@
 
 <style>
   .settings-panel {
-    width: 260px;
+    width: 280px;
     background: var(--background);
     border-left: var(--border-light);
     display: flex;

packages/builder/src/pages/builder/app/[application]/design/components/[screenId]/[componentId]/_components/navigation/ComponentNavigationPanel.svelte

@@ -64,6 +64,7 @@
   title="Components"
   showAddButton
   onClickAddButton={() => $goto("../new")}
+  showExpandIcon
 >
   <div class="nav-items-container" bind:this={scrollRef}>
     <NavItem

packages/builder/src/pages/builder/app/[application]/design/components/[screenId]/new/_components/NewComponentPanel.svelte

@@ -97,7 +97,6 @@
   title="Add component"
   showBackButton
   onClickBackButton={() => $goto("../slot")}
-  wide
 >
   <Layout paddingX="L" paddingY="XL" gap="S">
     <ActionGroup compact justified>
@@ -156,7 +155,7 @@
 <style>
   .component-grid {
     display: grid;
-    grid-template-columns: repeat(4, minmax(0, 1fr));
+    grid-template-columns: repeat(3, minmax(0, 1fr));
     gap: var(--spacing-s);
   }
   .component {