From 88df48d3a9d96dc67e45b1b841f834f7df0d69f9 Mon Sep 17 00:00:00 2001
From: Alexander Platov <sas_lord@mail.ru>
Date: Fri, 17 Dec 2021 12:06:08 +0300
Subject: [PATCH] Limiting lines and text length (#658)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>
---
 packages/theme/styles/_layouts.scss                    | 10 ++++++++++
 packages/ui/src/components/TooltipInstance.svelte      |  2 +-
 .../src/components/CreateChannel.svelte                |  2 +-
 .../src/components/CreateOrganizations.svelte          |  2 +-
 .../src/components/CreatePersons.svelte                |  2 +-
 .../lead-resources/src/components/CreateFunnel.svelte  |  2 +-
 .../lead-resources/src/components/CreateLead.svelte    |  2 +-
 .../src/components/CreateCandidates.svelte             |  2 +-
 .../src/components/CreateVacancy.svelte                |  2 +-
 .../recruit-resources/src/components/KanbanCard.svelte |  4 ++--
 .../task-resources/src/components/CreateProject.svelte |  2 +-
 .../task-resources/src/components/CreateTask.svelte    |  2 +-
 .../task-resources/src/components/KanbanCard.svelte    |  4 ++--
 .../src/components/StringPresenter.svelte              |  6 ++----
 14 files changed, 26 insertions(+), 18 deletions(-)

diff --git a/packages/theme/styles/_layouts.scss b/packages/theme/styles/_layouts.scss
index a980a0a4d4..2dddedbb89 100644
--- a/packages/theme/styles/_layouts.scss
+++ b/packages/theme/styles/_layouts.scss
@@ -332,6 +332,16 @@ a.no-line {
   user-select: none;
   min-width: 0;
 }
+.lines-limit-2 {
+  min-width: 0;
+  overflow: hidden;
+  visibility: visible;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  /* autoprefixer: ignore next */
+  -webkit-box-orient: vertical;
+}
 
 .focused-button {
   background-color: var(--theme-button-bg-focused);
diff --git a/packages/ui/src/components/TooltipInstance.svelte b/packages/ui/src/components/TooltipInstance.svelte
index 659797aef2..ccd0636631 100644
--- a/packages/ui/src/components/TooltipInstance.svelte
+++ b/packages/ui/src/components/TooltipInstance.svelte
@@ -118,7 +118,7 @@
   }
 
   const hideTooltip = (): void => {
-    tooltipHTML.style.visibility = 'hidden'
+    if (tooltipHTML) tooltipHTML.style.visibility = 'hidden'
     closeTooltip()
   }
 
diff --git a/plugins/chunter-resources/src/components/CreateChannel.svelte b/plugins/chunter-resources/src/components/CreateChannel.svelte
index 29798892a2..7c65b51d5b 100644
--- a/plugins/chunter-resources/src/components/CreateChannel.svelte
+++ b/plugins/chunter-resources/src/components/CreateChannel.svelte
@@ -48,7 +48,7 @@
   on:close={() => { dispatch('close') }}
 >
   <Grid column={1} rowGap={1.5}>
-    <EditBox label={chunter.string.ChannelName} icon={IconFolder} bind:value={name} placeholder={'Channel'} focus/>
+    <EditBox label={chunter.string.ChannelName} icon={IconFolder} bind:value={name} placeholder={'Channel'} maxWidth={'16rem'} focus/>
     <ToggleWithLabel label={chunter.string.MakePrivate} description={chunter.string.MakePrivateDescription}/>
   </Grid>
 </SpaceCreateCard>
diff --git a/plugins/contact-resources/src/components/CreateOrganizations.svelte b/plugins/contact-resources/src/components/CreateOrganizations.svelte
index 7aca879742..07af7fa271 100644
--- a/plugins/contact-resources/src/components/CreateOrganizations.svelte
+++ b/plugins/contact-resources/src/components/CreateOrganizations.svelte
@@ -50,7 +50,7 @@
   }}
 >
   <Grid column={1} rowGap={1.5}>
-    <EditBox label={contact.string.Name} icon={IconFolder} bind:value={name} placeholder="Organizations" focus />
+    <EditBox label={contact.string.Name} icon={IconFolder} bind:value={name} placeholder="Organizations" maxWidth={'16rem'} focus />
     <ToggleWithLabel label={contact.string.MakePrivate} description={contact.string.MakePrivateDescription} />
   </Grid>
 </SpaceCreateCard>
diff --git a/plugins/contact-resources/src/components/CreatePersons.svelte b/plugins/contact-resources/src/components/CreatePersons.svelte
index 745d3ba6b5..a44270e58a 100644
--- a/plugins/contact-resources/src/components/CreatePersons.svelte
+++ b/plugins/contact-resources/src/components/CreatePersons.svelte
@@ -50,7 +50,7 @@
   }}
 >
   <Grid column={1} rowGap={1.5}>
-    <EditBox label={contact.string.Name} icon={IconFolder} bind:value={name} placeholder="Folder" focus />
+    <EditBox label={contact.string.Name} icon={IconFolder} bind:value={name} placeholder="Folder" maxWidth={'16rem'} focus />
     <ToggleWithLabel label={contact.string.MakePrivate} description={contact.string.MakePrivateDescription} />
   </Grid>
 </SpaceCreateCard>
diff --git a/plugins/lead-resources/src/components/CreateFunnel.svelte b/plugins/lead-resources/src/components/CreateFunnel.svelte
index 20f5501211..4f8b40a338 100644
--- a/plugins/lead-resources/src/components/CreateFunnel.svelte
+++ b/plugins/lead-resources/src/components/CreateFunnel.svelte
@@ -63,7 +63,7 @@
   }}
 >
   <Grid column={1} rowGap={1.5}>
-    <EditBox label={lead.string.FunnelName} icon={IconFolder} bind:value={name} placeholder={'Funnel name'} focus />
+    <EditBox label={lead.string.FunnelName} icon={IconFolder} bind:value={name} placeholder={'Funnel name'} maxWidth={'16rem'} focus />
     <ToggleWithLabel label={lead.string.MakePrivate} description={lead.string.MakePrivateDescription} />
     <KanbanTemplateSelector folders={[lead.space.FunnelTemplates]} bind:template={templateId}/>
   </Grid>
diff --git a/plugins/lead-resources/src/components/CreateLead.svelte b/plugins/lead-resources/src/components/CreateLead.svelte
index 9d6f1bb8e4..b6b49edc06 100644
--- a/plugins/lead-resources/src/components/CreateLead.svelte
+++ b/plugins/lead-resources/src/components/CreateLead.svelte
@@ -97,7 +97,7 @@
       bind:value={title}
       icon={lead.icon.Lead}
       placeholder="The simple lead"
-      maxWidth="39rem"
+      maxWidth={'16rem'}
       focus
     />
     <UserBox _class={contact.class.Contact} title="Customer" caption="Select customer" bind:value={customer} />
diff --git a/plugins/recruit-resources/src/components/CreateCandidates.svelte b/plugins/recruit-resources/src/components/CreateCandidates.svelte
index f98aceffe2..4a89dde59c 100644
--- a/plugins/recruit-resources/src/components/CreateCandidates.svelte
+++ b/plugins/recruit-resources/src/components/CreateCandidates.svelte
@@ -50,7 +50,7 @@
   on:close={() => { dispatch('close') }}
 >
   <Grid column={1} rowGap={1.5}>
-    <EditBox label={recruit.string.CandidatesName} icon={IconFolder} bind:value={name} placeholder={'Talent Pool'} focus/>
+    <EditBox label={recruit.string.CandidatesName} icon={IconFolder} bind:value={name} placeholder={'Talent Pool'} maxWidth={'16rem'} focus/>
     <ToggleWithLabel label={recruit.string.MakePrivate} description={recruit.string.MakePrivateDescription}/>
   </Grid>
 </SpaceCreateCard>
diff --git a/plugins/recruit-resources/src/components/CreateVacancy.svelte b/plugins/recruit-resources/src/components/CreateVacancy.svelte
index bb81949489..89b48b4785 100644
--- a/plugins/recruit-resources/src/components/CreateVacancy.svelte
+++ b/plugins/recruit-resources/src/components/CreateVacancy.svelte
@@ -62,7 +62,7 @@
   on:close={() => { dispatch('close') }}
 >
   <Grid column={1} rowGap={1.5}>
-    <EditBox label={recruit.string.VacancyName} bind:value={name} icon={Vacancy} placeholder="Software Engineer" maxWidth="39rem" focus/>
+    <EditBox label={recruit.string.VacancyName} bind:value={name} icon={Vacancy} placeholder="Software Engineer" maxWidth={'16rem'} focus/>
     <Dropdown icon={Company} label={'Company *'} placeholder={'Company'} />
     <KanbanTemplateSelector folders={[recruit.space.VacancyTemplates]} bind:template={templateId}/>
   </Grid>
diff --git a/plugins/recruit-resources/src/components/KanbanCard.svelte b/plugins/recruit-resources/src/components/KanbanCard.svelte
index 1c53f2bf44..8d3501056b 100644
--- a/plugins/recruit-resources/src/components/KanbanCard.svelte
+++ b/plugins/recruit-resources/src/components/KanbanCard.svelte
@@ -39,8 +39,8 @@
     <div class="flex-row-center">
       <Avatar avatar={object.$lookup?.attachedTo?.avatar} size={'medium'} />
       <div class="flex-col ml-2">
-        <div class="fs-title over-underline" on:click={showCandidate}><Label label={formatName(object.$lookup?.attachedTo?.name)} /></div>
-        <div class="small-text">{object.$lookup?.attachedTo?.title ?? ''}</div>
+        <div class="fs-title over-underline lines-limit-2" on:click={showCandidate}><Label label={formatName(object.$lookup?.attachedTo?.name)} /></div>
+        <div class="small-text lines-limit-2">{object.$lookup?.attachedTo?.title ?? ''}</div>
       </div>
     </div>
     <ActionIcon label={'More...'} icon={IconMoreH} size={'small'} />
diff --git a/plugins/task-resources/src/components/CreateProject.svelte b/plugins/task-resources/src/components/CreateProject.svelte
index aac95bda71..964e47171d 100644
--- a/plugins/task-resources/src/components/CreateProject.svelte
+++ b/plugins/task-resources/src/components/CreateProject.svelte
@@ -62,7 +62,7 @@
   }}
 >
   <Grid column={1} rowGap={1.5}>
-    <EditBox label={task.string.ProjectName} icon={IconFolder} bind:value={name} placeholder={'Project name'} focus />
+    <EditBox label={task.string.ProjectName} icon={IconFolder} bind:value={name} placeholder={'Project name'} maxWidth={'16rem'} focus />
     <ToggleWithLabel label={task.string.MakePrivate} description={task.string.MakePrivateDescription} />
     <KanbanTemplateSelector folders={[task.space.ProjectTemplates]} bind:template={templateId}/>
   </Grid>
diff --git a/plugins/task-resources/src/components/CreateTask.svelte b/plugins/task-resources/src/components/CreateTask.svelte
index 35b24873cc..a069ec87ca 100644
--- a/plugins/task-resources/src/components/CreateTask.svelte
+++ b/plugins/task-resources/src/components/CreateTask.svelte
@@ -107,7 +107,7 @@
       bind:value={object.name}
       icon={task.icon.Task}
       placeholder="The boring task"
-      maxWidth="39rem"
+      maxWidth={'16rem'}
       focus
     />
     <UserBox
diff --git a/plugins/task-resources/src/components/KanbanCard.svelte b/plugins/task-resources/src/components/KanbanCard.svelte
index 0c1d179b97..0a006c3a79 100644
--- a/plugins/task-resources/src/components/KanbanCard.svelte
+++ b/plugins/task-resources/src/components/KanbanCard.svelte
@@ -39,8 +39,8 @@
         <div class="sm-tool-icon step-lr75">
           <TaskPresenter value={object} />
         </div>
-        <div class="fs-title">{object.name}</div>
-        <div class="small-text">{object.description}</div>
+        <div class="fs-title lines-limit-2">{object.name}</div>
+        <div class="small-text lines-limit-2">{object.description}</div>
       </div>
     </div>
   </div>
diff --git a/plugins/view-resources/src/components/StringPresenter.svelte b/plugins/view-resources/src/components/StringPresenter.svelte
index 3e289a226c..243faee57e 100644
--- a/plugins/view-resources/src/components/StringPresenter.svelte
+++ b/plugins/view-resources/src/components/StringPresenter.svelte
@@ -15,9 +15,7 @@
 -->
 
 <script lang="ts">
-
-export let value: string
-
+  export let value: string
 </script>
 
-{value}
+<span class="lines-limit-2">{value}</span>