Allow resizing controls (#561)

Author: ernestognw

packages/ui/src/cairo/App.svelte

@@ -179,7 +179,9 @@
   </div>
 
   <div class="flex flex-row grow">
-    <div class="controls rounded-l-3xl w-72 flex flex-col shrink-0 justify-between h-[calc(100vh-84px)] overflow-auto">
+    <div
+      class="controls rounded-l-3xl min-w-72 w-72 max-w-[calc(100vw-420px)] flex flex-col shrink-0 justify-between h-[calc(100vh-84px)] overflow-auto resize-x"
+    >
       <div class:hidden={tab !== 'ERC20'}>
         <ERC20Controls bind:opts={allOpts.ERC20} errors={errors.ERC20} />
       </div>

packages/ui/src/cairo_alpha/App.svelte

@@ -185,7 +185,9 @@
   </div>
 
   <div class="flex flex-row grow">
-    <div class="controls rounded-l-3xl w-72 flex flex-col shrink-0 justify-between h-[calc(100vh-84px)] overflow-auto">
+    <div
+      class="controls rounded-l-3xl min-w-72 w-72 max-w-[calc(100vw-420px)] flex flex-col shrink-0 justify-between h-[calc(100vh-84px)] overflow-auto resize-x"
+    >
       <div class:hidden={tab !== 'ERC20'}>
         <ERC20Controls bind:opts={allOpts.ERC20} errors={errors.ERC20} />
       </div>

packages/ui/src/common/HelpTooltip.svelte

@@ -2,18 +2,11 @@
   import Tooltip from './Tooltip.svelte';
 
   export let link: string | undefined = undefined;
-  export let align: 'right' | undefined = undefined;
   export let placement: 'top' | 'bottom' | 'left' | 'right' = 'right';
 </script>
 
 <Tooltip let:trigger interactive {placement} theme="light border" maxWidth="22em">
-  <svg
-    use:trigger
-    class="tooltip"
-    class:ml-auto={align === 'right'}
-    style="width: 1rem; height: 1rem;"
-    viewBox="0 0 24 24"
-  >
+  <svg use:trigger class="tooltip" style="width: 1rem; height: 1rem;" viewBox="0 0 24 24">
     <path
       fill="currentColor"
       d="M15.07,11.25L14.17,12.17C13.45,12.89 13,13.5 13,15H11V14.5C11,13.39 11.45,12.39 12.17,11.67L13.41,10.41C13.78,10.05 14,9.55 14,9C14,7.89 13.1,7 12,7A2,2 0 0,0 10,9H8A4,4 0 0,1 12,5A4,4 0 0,1 16,9C16,9.88 15.64,10.67 15.07,11.25M13,19H11V17H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z"

packages/ui/src/common/ParentExpandableSection.svelte

@@ -58,7 +58,7 @@
 <section class="controls-section">
   <h1>
     <!-- svelte-ignore a11y-label-has-associated-control -->
-    <label class="items-center tooltip-container pr-2 grid grid-cols-[5fr,1fr]">
+    <label class="items-center tooltip-container pr-2 flex justify-between">
       <div class="flex items-center">
         <span class="mr-2">
           {#if type === 'checkbox'}
@@ -76,7 +76,7 @@
       <div class="flex items-center">
         <button
           on:click|preventDefault={toggleExpanded}
-          class="px-1 bg-transparent border-0"
+          class="px-1 bg-transparent border-0 mr-2"
           aria-label={isExpanded ? 'Collapse section' : 'Expand section'}
         >
           {#if isExpanded}
@@ -85,7 +85,7 @@
             <ChevronRight />
           {/if}
         </button>
-        <HelpTooltip align="right" link={helpLink}>
+        <HelpTooltip link={helpLink}>
           {@html helpContent}
         </HelpTooltip>
       </div>

packages/ui/src/solidity/App.svelte

@@ -346,7 +346,9 @@
   </div>
 
   <div class="flex flex-row grow">
-    <div class="controls rounded-l-3xl w-72 flex flex-col shrink-0 justify-between h-[calc(100vh-84px)] overflow-auto">
+    <div
+      class="controls rounded-l-3xl min-w-72 w-72 max-w-[calc(100vw-420px)] flex flex-col shrink-0 justify-between h-[calc(100vh-84px)] overflow-auto resize-x"
+    >
       <div class:hidden={tab !== 'ERC20'}>
         <ERC20Controls bind:opts={allOpts.ERC20} errors={errors.ERC20} />
       </div>

packages/ui/src/stellar/App.svelte

@@ -168,7 +168,9 @@
   </div>
 
   <div class="flex flex-row grow">
-    <div class="controls rounded-l-3xl w-72 flex flex-col shrink-0 justify-between h-[calc(100vh-84px)] overflow-auto">
+    <div
+      class="controls rounded-l-3xl min-w-72 w-72 max-w-[calc(100vw-420px)] flex flex-col shrink-0 justify-between h-[calc(100vh-84px)] overflow-auto resize-x"
+    >
       <div class:hidden={tab !== 'Fungible'}>
         <FungibleControls bind:opts={allOpts.Fungible} errors={errors.Fungible} />
       </div>

packages/ui/src/stylus/App.svelte

@@ -172,7 +172,9 @@
   </div>
 
   <div class="flex flex-row grow">
-    <div class="controls rounded-l-3xl w-72 flex flex-col shrink-0 justify-between h-[calc(100vh-84px)] overflow-auto">
+    <div
+      class="controls rounded-l-3xl min-w-72 w-72 max-w-[calc(100vw-420px)] flex flex-col shrink-0 justify-between h-[calc(100vh-84px)] overflow-auto resize-x"
+    >
       <div class:hidden={tab !== 'ERC20'}>
         <ERC20Controls bind:opts={allOpts.ERC20} errors={errors.ERC20} />
       </div>