Fix Panel and Channels (#189)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>

packages/panel/src/components/Panel.svelte

@@ -64,15 +64,21 @@
       </div>
       <div class="title">{title}</div>
     </div>
-    {#if $$slots.subtitle}<div class="subtitle"><slot name="subtitle" /></div>{/if}
+    {#if $$slots.subtitle}<div class="flex-row-center subtitle"><slot name="subtitle" /></div>{/if}
-    <div class="content"><ScrollBox vertical stretch><slot /></ScrollBox></div>
+    <div class="flex-col h-full scroll-container">
+      <ScrollBox vertical stretch>
+        <div class="flex-col content">
+          <slot />
+        </div>
+      </ScrollBox>
+    </div>
   </div>
   <div class="rightSection">
     <div class="flex-row-center header">
       <div class="icon"><IconActivity size={'small'} /></div>
       <div class="title">Activity</div>
     </div>
-    <div class="content">
+    <div class="flex-col h-full content">
       <ScrollBox vertical stretch>
         {#if comments}
         <Grid column={1} rowGap={1.5}>
@@ -97,14 +103,16 @@
       </div>
       <div class="title">{title}</div>
     </div>
-    {#if $$slots.subtitle}<div class="subtitle"><slot name="subtitle" /></div>{/if}
+    {#if $$slots.subtitle}<div class="flex-row-center subtitle"><slot name="subtitle" /></div>{/if}
     <ScrollBox vertical stretch noShift>
-      <div class="content"><slot /></div>
+      <div class="flex-col content">
+        <slot />
+      </div>
       <div class="flex-row-center activity header">
         <div class="icon"><IconActivity size={'small'} /></div>
         <div class="title">Activity</div>
       </div>
-      <div class="activity content">
+      <div class="flex-col activity content">
         {#if comments}
         <Grid column={1} rowGap={1.5}>
           {#each comments as comment}
@@ -160,8 +168,6 @@
 
     .subtitle {
       flex-shrink: 0;
-      display: flex;
-      align-items: center;
       padding: 0 2rem;
       height: 3.5rem;
       border-bottom: 1px solid var(--theme-card-divider);
@@ -174,52 +180,56 @@
     display: flex;
     flex-direction: column;
     height: max-content;
-  }
+
-  .content {
+    .content {
-    overflow: visible;
+      flex-shrink: 0;
-    display: flex;
+      display: flex;
-    flex-direction: column;
+      flex-direction: column;
-    padding: 1.5rem 2.5rem;
+      padding: 1.5rem 2.5rem;
-    height: max-content;
+      height: max-content;
-  }
+    }
-  .activity {
+    .activity {
-    background-color: var(--theme-bg-accent-color);
-    &.header { border-bottom: none; }
-    &.content {
-      flex-grow: 1;
-      padding-bottom: 0;
       background-color: var(--theme-bg-accent-color);
+      &.header { border-bottom: none; }
+      &.content {
+        flex-grow: 1;
+        padding-bottom: 0;
+        background-color: var(--theme-bg-accent-color);
+      }
     }
   }
 
   .fullSize {
     flex-direction: row;
     left: 1.5rem;
+  }
 
-    .leftSection, .rightSection {
+  .leftSection, .rightSection {
-      flex-basis: 50%;
+    flex-basis: 50%;
-      display: flex;
+    display: flex;
-      flex-direction: column;
+    flex-direction: column;
-    }
+  }
-    .leftSection {
+  .leftSection {
-      border-right: 1px solid var(--theme-bg-accent-hover);
+    border-right: 1px solid var(--theme-bg-accent-hover);
+    .scroll-container {
+      flex-grow: 1;
+      padding: 2rem 2rem 1rem;
       .content {
         flex-grow: 1;
-        margin-top: 2.5rem;
+        padding: .5rem .5rem .5rem;
-      }
-    }
-    .rightSection {
-      background-color: transparent;
-      .header { border-bottom: 1px solid var(--theme-card-divider); }
-      .content {
-        flex-grow: 1;
-        padding-top: 2.5rem;
-        padding-bottom: 0;
-        background-color: var(--theme-bg-accent-color);
       }
     }
   }
-  
+  .rightSection {
+    background-color: transparent;
+    .header { border-bottom: 1px solid var(--theme-card-divider); }
+    .content {
+      flex-grow: 1;
+      padding: 2.5rem 2.5rem 0;
+      background-color: var(--theme-bg-accent-color);
+    }
+  }
+
   .ref-input {
     background-color: var(--theme-bg-accent-color);
     padding: 1.5rem 2.5rem;

packages/presentation/src/components/Channels.svelte

@@ -74,7 +74,7 @@
         <Icon icon={item.icon} size={'small'}/>
       </div>
     </div>
-    <div class="window">
+    <div class="window {reverse ? 'right' : 'left'}">
       <div class="circle circle-icon">
         <div class="icon"><Icon icon={item.icon} size={'small'}/></div>
       </div>
@@ -162,7 +162,6 @@
       justify-content: space-between;
       padding: 1rem;
       top: 2.25rem;
-      right: 0;
       min-width: 100%;
       background-color: var(--theme-button-bg-focused);
       border: 1px solid var(--theme-button-border-enabled);
@@ -174,6 +173,8 @@
         z-index: 4;
         visibility: visible;
       }
+      &.right { right: 0; }
+      &.left { left: 0; }
     }
   }
   .label {

plugins/recruit-resources/src/components/EditCandidate.svelte

@@ -50,8 +50,8 @@
 <Panel icon={Contact} title={object.firstName + ' ' + object.lastName} {object} on:close={() => { dispatch('close') }}>
   <svelte:fragment slot="subtitle">
     <div class="flex-between flex-reverse" style="width: 100%">
-      <CircleButton icon={Edit} label={'Edit'} on:click={(ev) => showPopup(SocialEditor, { values: object.channels ?? [] }, ev.target, (result) => { saveChannels(result) })} />      
       <Channels value={object.channels}/>
+      <CircleButton icon={Edit} label={'Edit'} on:click={(ev) => showPopup(SocialEditor, { values: object.channels ?? [] }, ev.target, (result) => { saveChannels(result) })} />      
     </div>
   </svelte:fragment>