Fix layouts (#606)

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

packages/presentation/src/components/SpaceInfo.svelte

@@ -49,7 +49,6 @@
       color: var(--theme-content-dark-color);
     }
     .title {
-      font-weight: 500;
       text-align: left;
       overflow: hidden;
       white-space: nowrap;

packages/presentation/src/components/UserInfo.svelte

@@ -41,7 +41,6 @@
       color: var(--theme-content-dark-color);
     }
     .title {
-      font-weight: 500;
       text-align: left;
       overflow: hidden;
       white-space: nowrap;

packages/theme/styles/_layouts.scss

@@ -44,6 +44,7 @@ button {
   user-select: none;
 }
 input {
+  min-width: 0;
   font: inherit;
   background-color: transparent;
   outline: none;
@@ -255,6 +256,12 @@ p:last-child { margin-block-end: 0; }
 }
 .svg-small, .svg-medium, .svg-large { flex-shrink: 0; }
 
+.svg-mask {
+  position: absolute;
+  width: 0;
+  height: 0;
+}
+
 .scale-75 {
   transform-origin: center center;
   transform: scale(.75);
@@ -304,6 +311,7 @@ a.no-line {
   text-overflow: ellipsis;
   overflow: hidden;
   user-select: none;
+  min-width: 0;
 }
 
 .focused-button {

packages/ui/src/components/TooltipInstance.svelte

@@ -41,6 +41,7 @@
 
         if ($tooltip.component) {
 
+          tooltipHTML.style.top = tooltipHTML.style.bottom = tooltipHTML.style.height = ''
           if (rect.bottom + tooltipHTML.clientHeight + 28 < doc.height) {
             tooltipHTML.style.top = `calc(${rect.bottom}px + 5px + .25rem)`
             dir = 'bottom'
@@ -48,14 +49,14 @@
             tooltipHTML.style.bottom = `calc(${doc.height - rect.y}px + 5px + .25rem)`
             if (tooltipHTML.clientHeight > rect.top - 28) {
               tooltipHTML.style.top = '1rem'
-              tooltipHTML.style.height = rect.top - 28 + 'px'
+              tooltipHTML.style.height = `calc(${rect.top}px - 5px - 1.25rem)`
             }
             dir = 'top'
           } else {
             tooltipHTML.style.top = `calc(${rect.bottom}px + 5px + .25rem)`
             if (tooltipHTML.clientHeight > doc.height - rect.bottom - 28) {
               tooltipHTML.style.bottom = '1rem'
-              tooltipHTML.style.height = doc.height - rect.bottom - 28 + 'px'
+              tooltipHTML.style.height = `calc(${doc.height - rect.bottom}px - 5px - 1.25rem)`
             }
             dir = 'bottom'
           }
@@ -143,7 +144,7 @@
 </script>
 
 <svelte:window on:resize={fitTooltip} on:mousemove={(ev) => { whileShow(ev) }} />
-<svg class="mask">
+<svg class="svg-mask">
   <clipPath id="nub-bg"><path d="M7.3.6 4.2 4.3C2.9 5.4 1.5 6 0 6v1h18V6c-1.5 0-2.9-.6-4.2-1.7L10.7.6C9.9-.1 8.5-.2 7.5.4c0 .1-.1.1-.2.2z" /></clipPath>
   <clipPath id="nub-border"><path d="M4.8 5.1 8 1.3s.1 0 .1-.1c.5-.3 1.4-.3 1.9.1L13.1 5l.1.1 1.2.9H18c-1.5 0-2.9-.6-4.2-1.7L10.7.6C9.9-.1 8.5-.2 7.5.4c0 .1-.1.1-.2.2L4.2 4.3C2.9 5.4 1.5 6 0 6h3.6l1.2-.9z" /></clipPath>
 </svg>
@@ -168,6 +169,7 @@
   }
 
   .popup {
+    overflow: hidden;
     position: fixed;
     display: flex;
     flex-direction: column;

plugins/activity-resources/src/components/Activity.svelte

@@ -23,8 +23,9 @@
   import { ActivityKey, activityKey, DisplayTx, newActivity } from '../activity'
   import TxView from './TxView.svelte'
 
-  export let fullSize: boolean = false
   export let object: Doc
+  export let fullSize: boolean = false
+  export let transparent: boolean = false
 
   let txes: DisplayTx[] = []
 
@@ -54,12 +55,14 @@
   })
 </script>
 
-{#if fullSize}
+{#if fullSize || transparent}
-  <div class="flex-row-center header">
+  {#if !transparent}
-    <div class="flex-center icon"><IconActivity size={'small'} /></div>
+    <div class="flex-row-center header">
-    <div class="fs-title">Activity</div>
+      <div class="flex-center icon"><IconActivity size={'small'} /></div>
-  </div>
+      <div class="fs-title">Activity</div>
-  <div class="flex-col h-full right-content">
+    </div>
+  {/if}
+  <div class="h-full right-content" class:transparent>
     <ScrollBox vertical stretch>
       {#if txes}
         <Grid column={1} rowGap={1.5}>
@@ -70,7 +73,7 @@
       {/if}
     </ScrollBox>
   </div>
-  <div class="ref-input"><ReferenceInput on:message={onMessage} /></div>
+  <div class="ref-input" class:transparent><ReferenceInput on:message={onMessage} /></div>
 {:else}
   <div class="unionSection">
     <ScrollBox vertical stretch noShift>
@@ -126,12 +129,23 @@
   .ref-input {
     background-color: var(--theme-bg-accent-color);
     padding: 1.5rem 2.5rem;
+    &.transparent {
+      padding: 1.5rem 0 0;
+      background-color: transparent;
+    }
   }
 
   .right-content {
     flex-grow: 1;
     padding: 1.5rem 2.5rem 0;
     background-color: var(--theme-dialog-accent);
+    &.transparent {
+      min-height: 0;
+      height: 100%;
+      max-height: 100%;
+      padding: 0;
+      background-color: transparent;
+    }
   }
 
   .unionSection {

plugins/chunter-resources/src/components/CommentPresenter.svelte

@@ -60,6 +60,7 @@
     display: -webkit-box;
     -webkit-line-clamp: 7;
     -webkit-box-orient: vertical;  
+    text-overflow: ellipsis;
     overflow: hidden;
   }
 </style>

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

@@ -94,7 +94,7 @@
         {:else if selected === 1}
           <ToggleWithLabel label={'This vacancy is private'} description={recruit.string.MakePrivateDescription}/>
         {:else if selected === 2}
-          <Component is={activity.component.Activity} props={{object}} />
+          <Component is={activity.component.Activity} props={{object, transparent: true}} />
         {/if}
       </div>
     </div>
@@ -176,8 +176,8 @@
     flex-grow: 1;
     overflow-x: hidden;
     overflow-y: auto;
-    margin: 1rem 0;
+    margin: 1rem 2rem;
-    padding: 1.5rem 2.5rem;
+    padding: 1.5rem .5rem;
 
     .box {
       margin-right: 1px;

plugins/telegram-resources/src/components/Message.svelte

@@ -97,6 +97,7 @@
       color: var(--theme-content-trans-color);
       font-size: 0.75rem;
       font-style: italic;
+      white-space: nowrap;
     }
   }
 

plugins/telegram-resources/src/components/SharedMessages.svelte

@@ -26,6 +26,7 @@
 
 <style lang="scss">
   .container {
+    padding: 1.25rem 0 1.5rem;
     background-color: var(--theme-bg-accent-color);
     border: 1px solid var(--theme-bg-accent-color);
     border-radius: 0.75rem;

plugins/workbench-resources/src/components/Workbench.svelte

@@ -82,7 +82,7 @@
 </script>
 
 {#if client}
-  <svg class="mask">
+  <svg class="svg-mask">
     <clipPath id="notify-normal">
       <path d="M0,0v52.5h52.5V0H0z M34,23.2c-3.2,0-5.8-2.6-5.8-5.8c0-3.2,2.6-5.8,5.8-5.8c3.2,0,5.8,2.6,5.8,5.8 C39.8,20.7,37.2,23.2,34,23.2z"/>
     </clipPath>
@@ -116,12 +116,6 @@
         <NavHeader label={currentApplication.label} />
       {/if}
       <Navigator model={navigatorModel} />
-      <!-- <div class="flex-center safari-gap-2" style="height: 20rem">
-        <ActionIcon icon={IconEdit} label={workbench.string.ShowMenu} size={'small'} direction={'left'} />
-        <ActionIcon icon={IconEdit} label={workbench.string.ShowMenu} size={'small'} direction={'top'} />
-        <ActionIcon icon={IconEdit} label={workbench.string.ShowMenu} size={'small'} direction={'bottom'} />
-        <ActionIcon icon={IconEdit} label={workbench.string.ShowMenu} size={'small'} direction={'right'} />
-      </div> -->
     </div>
     {/if}
     <div class="panel-component">
@@ -143,11 +137,6 @@
 {/if}
 
 <style lang="scss">
-  .mask {
-    position: absolute;
-    width: 0;
-    height: 0;
-  }
   .container {
     display: flex;
     height: 100%;