fix: match transaction aside layout

packages/webapp/src/components/AppShell/AppShell.module.scss

@@ -1,5 +1,7 @@
 :root {
   --aside-topbar-offset: 60px;
+  --aside-width: 34%;
+  --aside-min-width: 400px;
 }
 
 .main{
@@ -9,11 +11,14 @@
 }
 
 .aside{
-  width: 500px;
+  width: var(--aside-width);
+  min-width: var(--aside-min-width);
   height: 100dvh;
   border-left: 1px solid rgba(17, 20, 24, 0.15);
   height: inherit;
   overflow: auto;
+  display: flex;
+  flex-direction: column;
 }
 
 .root {

packages/webapp/src/components/Aside/Aside.module.scss

@@ -1,3 +1,9 @@
+.root{
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+}
+
 .title{
   align-items: center;
   background: #fff;
@@ -9,3 +15,9 @@
   z-index: 0;
   font-weight: 600;
 }
+
+.content{
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+}

packages/webapp/src/components/Aside/Aside.tsx

@@ -20,7 +20,7 @@ export function Aside({
     onClose && onClose();
   };
   return (
-    <Box>
+    <Box className={styles.root}>
       <Group position="apart" className={styles.title}>
         {title}
 
@@ -34,7 +34,7 @@ export function Aside({
           />
         )}
       </Group>
-      <Box>{children}</Box>
+      <Box className={styles.content}>{children}</Box>
     </Box>
   );
-}
+}