Fixed ToDoElement, RoomPopup components (#5394)

packages/theme/styles/common.scss

@@ -29,8 +29,9 @@
 .heading-bold-20 {
   font-family: var(--font-family);
   font-style: normal;
-  line-height: 1rem;
   color: var(--global-primary-TextColor);
+
+  &:not(.line-height-auto) { line-height: 1rem; }
 }
 .font-regular-11,
 .font-medium-11 {

packages/theme/styles/components.scss

@@ -573,7 +573,7 @@
 .hulyToDoLine-container {
   display: flex;
   justify-content: space-between;
-  align-items: flex-start;
+  align-items: center;
   gap: var(--spacing-1);
   margin: 0;
   padding: var(--spacing-0_75) var(--spacing-1) var(--spacing-0_75) var(--spacing-0_75);
@@ -584,6 +584,7 @@
   border-radius: var(--medium-BorderRadius);
   outline: none;
 
+  .hulyToDoLine-title { color: var(--global-primary-TextColor); }
   &.isDone {
     .hulyToDoLine-title {
       color: var(--global-tertiary-TextColor);
@@ -611,7 +612,6 @@
   .hulyToDoLine-statusPriority {
     position: relative;
     margin-right: var(--spacing-0_25);
-    padding-top: var(--spacing-0_5);
     min-width: var(--global-min-Size);
 
     &.isNew::after {
@@ -630,16 +630,6 @@
     width: var(--global-extra-small-Size);
     height: var(--global-extra-small-Size);
   }
-  .hulyToDoLine-top-align {
-    color: var(--global-primary-TextColor);
-
-    &.top-12 {
-      padding-top: 0.25rem;
-    }
-    &.top-14 {
-      padding-top: 0.175rem;
-    }
-  }
   .hulyToDoLine-icon {
     display: flex;
     justify-content: center;
@@ -651,7 +641,6 @@
   .hulyToDoLine-label {
     flex-grow: 1;
     flex-shrink: 1;
-    padding-top: var(--spacing-0_5);
     color: var(--global-secondary-TextColor);
 
     &:not(.large) {

packages/theme/styles/love.scss

@@ -139,23 +139,11 @@
     .hulySplitButton-main {
       flex-grow: 1;
     }
-    &.no-video:not(.row) .hulySplitButton-container {
+    .hulySplitButton-container {
-      grid-column: span 2;
-    }
-    &.row .hulySplitButton-container {
       flex-grow: 2;
     }
-    &.row.no-video .hulySplitButton-container {
+    &.no-video .hulySplitButton-container {
       flex-grow: 4;
     }
   }
-
-  &.small.cropped .scroller-container,
-  &.large.cropped .scroller-container {
-    max-height: 24.5rem;
-  }
-  &.medium.cropped .scroller-container {
-    max-height: 22.5rem;
-  }
-  .slot.hoverable:hover > .avatar-container { opacity: .35; }
 }

plugins/time-resources/src/components/ToDoElement.svelte

@@ -76,7 +76,7 @@
     showMenu(e, { object: todo })
   }}
 >
-  <div class="flex-row-top flex-grow flex-gap-2">
+  <div class="flex-row-center flex-grow flex-gap-2">
     <div class="hulyToDoLine-statusPriority" class:isNew>
       {#if updating !== undefined}
         <Spinner size={'small'} />
@@ -88,7 +88,7 @@
       {/if}
     </div>
     <WorkItemPresenter {todo} kind={'todo-line'} withoutSpace />
-    <div class="hulyToDoLine-title hulyToDoLine-top-align top-12 text-left font-regular-14 overflow-label">
+    <div class="hulyToDoLine-title text-left font-regular-14 line-height-auto overflow-label">
       {todo.title}
     </div>
   </div>
@@ -102,12 +102,12 @@
   </div>
   <div class="flex flex-no-shrink flex-gap-3 pl-2">
     {#if events.length > 0}
-      <span class="hulyToDoLine-top-align top-12 font-regular-12 secondary-textColor">
+      <span class="font-regular-12 secondary-textColor">
         <ToDoDuration {events} />
       </span>
     {/if}
     {#if todo.dueDate}
-      <span class="hulyToDoLine-top-align top-12 font-regular-12 secondary-textColor">
+      <span class="font-regular-12 secondary-textColor">
         {new Date(todo.dueDate).toLocaleDateString('default', { month: 'short', day: 'numeric' })}
       </span>
     {/if}