UI fixes (#1107)

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

packages/theme/styles/_layouts.scss

@@ -91,8 +91,12 @@ p:first-child { margin-block-start: 0; } // First and last padding
 p:last-child { margin-block-end: 0; }
 
 .p-inline {
-  word-break: break-all;
   line-height: 150%;
+  a {
+    word-break: break-all;
+    word-break: break-word;
+    hyphens: auto;
+  }
 }
 
 .inline-height2 {

packages/ui/src/components/ShowMore.svelte

@@ -42,7 +42,7 @@
   ><slot /></div>
 
   {#if !ignore && bigger && !fixed}
-    <div class="showMore" on:click={toggle}>
+    <div class="showMore" class:outter={cHeight > limit} on:click={toggle}>
       <Label label={(cHeight > limit) ? ui.string.ShowLess : ui.string.ShowMore} />
     </div>
   {/if}
@@ -76,5 +76,10 @@
     border-radius: 2.5rem;
     user-select: none;
     cursor: pointer;
+    
+    &.outter {
+      bottom: -2.75rem;
+      transform: translateX(-50%);
+    }
   }
 </style>

plugins/tags-resources/src/components/CreateTagElement.svelte

@@ -111,13 +111,13 @@
           focus
           placeholder={tags.string.TagName}
           placeholderParam={{ word: keyTitle }}
-          maxWidth="10rem"
+          maxWidth={'16rem'}
           bind:value={title}
         />
       </div>
 
       <div class="text-sm mt-4">
-        <EditBox placeholder={tags.string.TagDescriptionPlaceholder} maxWidth="15rem" bind:value={description} />
+        <EditBox placeholder={tags.string.TagDescriptionPlaceholder} maxWidth={'17.75rem'} bind:value={description} />
       </div>
 
       <div class="text-sm mt-4">

plugins/tags-resources/src/components/TagItem.svelte

@@ -56,16 +56,16 @@
 
 <style lang="scss">
   .tag-item {
-    margin: 0.25rem;
-    padding: 0.5rem;
+    margin: .25rem;
+    padding: .5rem;
 
-    border-radius: 0.5rem;
+    border-radius: .5rem;
 
     font-weight: 500;
-    font-size: 0.625rem;
+    font-size: .625rem;
 
     text-transform: uppercase;
-    color: #ffffff;
+    color: var(--theme-caption-color);
 
     display: flex;
     align-items: center;

plugins/view-resources/src/components/EditDoc.svelte

@@ -337,7 +337,7 @@
       font-size: 0.625rem;
 
       text-transform: uppercase;
-      color: #ffffff;
+      color: var(--theme-caption-color);
 
       display: flex;
       align-items: center;

plugins/view-resources/src/utils.ts

@@ -284,6 +284,7 @@ async function deleteRelatedDocuments (hierarchy: Hierarchy, object: Doc, client
 export function getMixinStyle (id: Ref<Class<Doc>>, selected: boolean): string {
   const color = getPlatformColorForText(id as string)
   return `
+    color: ${selected ? '#fff' : 'var(--theme-caption-color)'};
     background: ${color + (selected ? 'ff' : '33')};
     border: 1px solid ${color + (selected ? '0f' : '66')};
   `