align confidence label with stretch and score labels

puzzle · Nov 27, 2023 · 2cab30c · 2cab30c
1 parent 9e6b7e2
commit 2cab30c
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 12 deletions.
diff --git a/frontend/src/app/keyresult-detail/keyresult-detail.component.html b/frontend/src/app/keyresult-detail/keyresult-detail.component.html
@@ -21,7 +21,7 @@
 
         <div class="scoring-section">
           <app-scoring class="scoring-detail" [keyResult]="keyResult" [isDetail]="true"></app-scoring>
-          <span class="text-small d-flex align-items-center flex-column mb-2 ms-3">
+          <span class="text-small d-flex align-items-center flex-column mb-2 ms-3 confidence-container">
             Confidence
             <app-confidence
               [checkIn]="keyResult.lastCheckIn!"

diff --git a/frontend/src/app/keyresult-detail/keyresult-detail.component.scss b/frontend/src/app/keyresult-detail/keyresult-detail.component.scss
@@ -18,14 +18,6 @@
   width: 81.5%;
 }
 
-.confidence-container {
-  width: 18.5%;
-}
-
-.ordinal-scoring-boxes {
-  width: 31%;
-}
-
 .ordinal-col {
   width: 30%;
 }
@@ -67,9 +59,7 @@
     justify-content: space-between;
     row-gap: 10px;
   }
-}
 
-@media screen and (max-width: 580px) {
   .ordinal-div {
     flex-direction: column;
     align-items: center;
@@ -84,4 +74,11 @@
   .keyResult-detail-attribute-show {
     height: auto;
   }
+
+  .confidence-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    margin-bottom: 0.125rem !important;
+  }
 }
diff --git a/frontend/src/app/shared/custom/scoring/scoring.component.scss b/frontend/src/app/shared/custom/scoring/scoring.component.scss
@@ -1,3 +1,8 @@
+.scoring-container {
+  display: flex;
+  align-items: center;
+}
+
 .okr-score-label {
   display: inline-grid;
   width: 30%;
@@ -51,3 +56,9 @@
   display: inline-block;
   text-align: end;
 }
+
+@media screen and (max-width: 580px) {
+  .okr-stretch {
+    margin-bottom: 0.125rem !important;
+  }
+}
diff --git a/frontend/src/style/styles.scss b/frontend/src/style/styles.scss
@@ -58,7 +58,13 @@ body pzsh-backdrop {
 }
 
 .text-small {
-  font-size: 0.9rem;
+  font-size: 1rem;
+}
+
+@media screen and (max-width: 580px) {
+  .text-small {
+    font-size: 0.8rem;
+  }
 }
 
 .dialog {