From ff68fb5c0290a8a48540908d0eac9e8efb328d5b Mon Sep 17 00:00:00 2001
From: megli2 <egli@puzzle.ch>
Date: Mon, 4 Dec 2023 13:28:32 +0100
Subject: [PATCH 1/7] implement placeholder icons and add line-through
 decoration if actions are completed

---
 .../app/keyresult-detail/keyresult-detail.component.html  | 8 ++++----
 frontend/src/assets/icons/bookmark-check.svg              | 4 ++++
 frontend/src/assets/icons/bookmark.svg                    | 3 +++
 3 files changed, 11 insertions(+), 4 deletions(-)
 create mode 100644 frontend/src/assets/icons/bookmark-check.svg
 create mode 100644 frontend/src/assets/icons/bookmark.svg

diff --git a/frontend/src/app/keyresult-detail/keyresult-detail.component.html b/frontend/src/app/keyresult-detail/keyresult-detail.component.html
index 26ee09c3b1..ef7a7be37a 100644
--- a/frontend/src/app/keyresult-detail/keyresult-detail.component.html
+++ b/frontend/src/app/keyresult-detail/keyresult-detail.component.html
@@ -114,13 +114,13 @@
           <h2 class="sub-title-keyresult-detail fw-bold">Action Plan</h2>
           <div *ngFor="let action of keyResult.actionList" class="ms-2">
             <img
-              src="{{
-                action.isChecked ? '../assets/icons/checked_checkbox.svg' : '../assets/icons/empty_checkbox.svg'
-              }}"
+              src="{{ action.isChecked ? '../assets/icons/bookmark-check.svg' : '../assets/icons/bookmark.svg' }}"
               alt="checkbox"
               class="action-checkbox me-1"
             />
-            {{ action.action }}
+            <span [ngStyle]="{ 'text-decoration': action.isChecked ? 'line-through' : 'none' }">{{
+              action.action
+            }}</span>
           </div>
         </div>
 
diff --git a/frontend/src/assets/icons/bookmark-check.svg b/frontend/src/assets/icons/bookmark-check.svg
new file mode 100644
index 0000000000..dcbe089851
--- /dev/null
+++ b/frontend/src/assets/icons/bookmark-check.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-bookmark-check" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M10.854 5.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7.5 7.793l2.646-2.647a.5.5 0 0 1 .708 0z"/>
+  <path d="M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v13.5a.5.5 0 0 1-.777.416L8 13.101l-5.223 2.815A.5.5 0 0 1 2 15.5zm2-1a1 1 0 0 0-1 1v12.566l4.723-2.482a.5.5 0 0 1 .554 0L13 14.566V2a1 1 0 0 0-1-1z"/>
+</svg>
\ No newline at end of file
diff --git a/frontend/src/assets/icons/bookmark.svg b/frontend/src/assets/icons/bookmark.svg
new file mode 100644
index 0000000000..a21b14b0c8
--- /dev/null
+++ b/frontend/src/assets/icons/bookmark.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-bookmark" viewBox="0 0 16 16">
+  <path d="M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v13.5a.5.5 0 0 1-.777.416L8 13.101l-5.223 2.815A.5.5 0 0 1 2 15.5zm2-1a1 1 0 0 0-1 1v12.566l4.723-2.482a.5.5 0 0 1 .554 0L13 14.566V2a1 1 0 0 0-1-1z"/>
+</svg>
\ No newline at end of file

From df17f6d36d026883efdd42430b40c932915e6117 Mon Sep 17 00:00:00 2001
From: megli2 <egli@puzzle.ch>
Date: Mon, 4 Dec 2023 13:33:38 +0100
Subject: [PATCH 2/7] display - instead of empty string if description of
 objective is empty

---
 .../src/app/objective-detail/objective-detail.component.html | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/frontend/src/app/objective-detail/objective-detail.component.html b/frontend/src/app/objective-detail/objective-detail.component.html
index 650ee0fe39..eb47906b95 100644
--- a/frontend/src/app/objective-detail/objective-detail.component.html
+++ b/frontend/src/app/objective-detail/objective-detail.component.html
@@ -15,7 +15,10 @@
 
       <div class="me-3">
         <p class="sub-title-objective fw-bold mb-1">Beschrieb</p>
-        <p data-test-id="description" class="linebreak">{{ objective.description }}</p>
+        <p class="linebreak" *ngIf="objective.description === ''">-</p>
+        <p *ngIf="objective.description !== ''" data-test-id="description" class="linebreak">
+          {{ objective.description }}
+        </p>
 
         <div
           class="d-flex align-items-center flex-row justify-content-start mt-4"

From cb76f14c4d3cc0e73f7b5d38d3ec2f90d71d8efa Mon Sep 17 00:00:00 2001
From: megli2 <egli@puzzle.ch>
Date: Mon, 4 Dec 2023 13:44:56 +0100
Subject: [PATCH 3/7] add line through text-decoration if checkbox is clicked
 in check-in form

---
 .../checkin/check-in-form/check-in-form.component.html     | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/frontend/src/app/shared/dialog/checkin/check-in-form/check-in-form.component.html b/frontend/src/app/shared/dialog/checkin/check-in-form/check-in-form.component.html
index 56989a063c..b3665513b8 100644
--- a/frontend/src/app/shared/dialog/checkin/check-in-form/check-in-form.component.html
+++ b/frontend/src/app/shared/dialog/checkin/check-in-form/check-in-form.component.html
@@ -13,8 +13,11 @@
       <div *ngIf="getActions()?.length != 0" class="input-style gap-1">
         <label class="text-black mb-1">Action Plan:</label>
         <span *ngFor="let action of getActions(); let i = index" class="d-flex flex-row">
-          <mat-checkbox (change)="changeIsChecked($event, i)" [checked]="action.isChecked"></mat-checkbox>
-          <span class="action-list-item w-100">
+          <mat-checkbox #checkbox (change)="changeIsChecked($event, i)" [checked]="action.isChecked"></mat-checkbox>
+          <span
+            class="action-list-item w-100"
+            [ngStyle]="{ 'text-decoration': checkbox.checked ? 'line-through' : 'none' }"
+          >
             {{ action.action }}
           </span>
         </span>

From 8eb1603522349bf01780c876513b59d6624e54b2 Mon Sep 17 00:00:00 2001
From: Lias Kleisa <kleisa@puzzle.ch>
Date: Thu, 7 Dec 2023 11:12:45 +0100
Subject: [PATCH 4/7] Remove unused icons

---
 frontend/src/assets/icons/bookmark-check.svg      |  4 ----
 frontend/src/assets/icons/bookmark.svg            |  3 ---
 frontend/src/assets/icons/checked_checkbox.svg    |  1 -
 frontend/src/assets/icons/close.svg               |  4 ----
 frontend/src/assets/icons/close_icon.svg          |  6 ------
 frontend/src/assets/icons/empty_checkbox.svg      |  3 ---
 frontend/src/assets/icons/objective-indicator.svg | 15 ---------------
 frontend/src/assets/images/progress_bar.svg       |  5 -----
 8 files changed, 41 deletions(-)
 delete mode 100644 frontend/src/assets/icons/bookmark-check.svg
 delete mode 100644 frontend/src/assets/icons/bookmark.svg
 delete mode 100644 frontend/src/assets/icons/checked_checkbox.svg
 delete mode 100644 frontend/src/assets/icons/close.svg
 delete mode 100644 frontend/src/assets/icons/close_icon.svg
 delete mode 100644 frontend/src/assets/icons/empty_checkbox.svg
 delete mode 100644 frontend/src/assets/icons/objective-indicator.svg
 delete mode 100644 frontend/src/assets/images/progress_bar.svg

diff --git a/frontend/src/assets/icons/bookmark-check.svg b/frontend/src/assets/icons/bookmark-check.svg
deleted file mode 100644
index dcbe089851..0000000000
--- a/frontend/src/assets/icons/bookmark-check.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-bookmark-check" viewBox="0 0 16 16">
-  <path fill-rule="evenodd" d="M10.854 5.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7.5 7.793l2.646-2.647a.5.5 0 0 1 .708 0z"/>
-  <path d="M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v13.5a.5.5 0 0 1-.777.416L8 13.101l-5.223 2.815A.5.5 0 0 1 2 15.5zm2-1a1 1 0 0 0-1 1v12.566l4.723-2.482a.5.5 0 0 1 .554 0L13 14.566V2a1 1 0 0 0-1-1z"/>
-</svg>
\ No newline at end of file
diff --git a/frontend/src/assets/icons/bookmark.svg b/frontend/src/assets/icons/bookmark.svg
deleted file mode 100644
index a21b14b0c8..0000000000
--- a/frontend/src/assets/icons/bookmark.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-bookmark" viewBox="0 0 16 16">
-  <path d="M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v13.5a.5.5 0 0 1-.777.416L8 13.101l-5.223 2.815A.5.5 0 0 1 2 15.5zm2-1a1 1 0 0 0-1 1v12.566l4.723-2.482a.5.5 0 0 1 .554 0L13 14.566V2a1 1 0 0 0-1-1z"/>
-</svg>
\ No newline at end of file
diff --git a/frontend/src/assets/icons/checked_checkbox.svg b/frontend/src/assets/icons/checked_checkbox.svg
deleted file mode 100644
index 4487ca4874..0000000000
--- a/frontend/src/assets/icons/checked_checkbox.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M22 2v20h-20v-20h20zm2-2h-24v24h24v-24zm-5.541 8.409l-1.422-1.409-7.021 7.183-3.08-2.937-1.395 1.435 4.5 4.319 8.418-8.591z"/></svg>
\ No newline at end of file
diff --git a/frontend/src/assets/icons/close.svg b/frontend/src/assets/icons/close.svg
deleted file mode 100644
index f1c1ff8dc9..0000000000
--- a/frontend/src/assets/icons/close.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg width="15px" height="15px" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M1 16L16 1" stroke-width="1.5" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M16 16L1 1" stroke-width="1.5" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
diff --git a/frontend/src/assets/icons/close_icon.svg b/frontend/src/assets/icons/close_icon.svg
deleted file mode 100644
index 8b46070da6..0000000000
--- a/frontend/src/assets/icons/close_icon.svg
+++ /dev/null
@@ -1,6 +0,0 @@
-<svg width="15" height="15" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g id="Puzzle-Icons">
-<path id="Vector" d="M1 16L16 1" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
-<path id="Vector_2" d="M16 16L1 1" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
-</g>
-</svg>
diff --git a/frontend/src/assets/icons/empty_checkbox.svg b/frontend/src/assets/icons/empty_checkbox.svg
deleted file mode 100644
index e320700981..0000000000
--- a/frontend/src/assets/icons/empty_checkbox.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="0.5" y="0.5" width="9" height="9" fill="white" stroke="black"/>
-</svg>
diff --git a/frontend/src/assets/icons/objective-indicator.svg b/frontend/src/assets/icons/objective-indicator.svg
deleted file mode 100644
index bc7452a1ba..0000000000
--- a/frontend/src/assets/icons/objective-indicator.svg
+++ /dev/null
@@ -1,15 +0,0 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M0.5 8C0.5 3.85786 3.85786 0.5 8 0.5H19.5V16C19.5 17.933 17.933 19.5 16 19.5H0.5V8Z" fill="white" stroke="#1E5A96"/>
-
-  <style>
-    .o-style {
-      color: #000;
-      font-family: Roboto, sans-serif;
-      font-size: 12px;
-      font-style: normal;
-      font-weight: 600;
-      line-height: normal;
-    }
-  </style>
-  <text x="6" y="14.5" fill="black" class="o-style">O</text>
-</svg>
diff --git a/frontend/src/assets/images/progress_bar.svg b/frontend/src/assets/images/progress_bar.svg
deleted file mode 100644
index 8413a86332..0000000000
--- a/frontend/src/assets/images/progress_bar.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<svg viewBox="1 100 100 1" xmlns="http://www.w3.org/2000/svg">
-  <rect id="background" x="1" y="100" width="100" height="1" style="fill: #D3D3D3;"/>
-  <rect id="progress" x="1" y="100" width="90" height="1" style="fill: #1e5a96;"/>
-</svg>
\ No newline at end of file

From 9ecc3204b8172918cf8e1057115ff50716b2c3c9 Mon Sep 17 00:00:00 2001
From: Lias Kleisa <kleisa@puzzle.ch>
Date: Thu, 7 Dec 2023 11:13:29 +0100
Subject: [PATCH 5/7] Add new checkmark icon

---
 .../keyresult-detail/keyresult-detail.component.html  | 11 ++++++-----
 .../objective-detail/objective-detail.component.html  |  8 ++++----
 frontend/src/assets/icons/checkmark.svg               | 10 ++++++++++
 3 files changed, 20 insertions(+), 9 deletions(-)
 create mode 100644 frontend/src/assets/icons/checkmark.svg

diff --git a/frontend/src/app/keyresult-detail/keyresult-detail.component.html b/frontend/src/app/keyresult-detail/keyresult-detail.component.html
index ef7a7be37a..4a8b7361dc 100644
--- a/frontend/src/app/keyresult-detail/keyresult-detail.component.html
+++ b/frontend/src/app/keyresult-detail/keyresult-detail.component.html
@@ -114,20 +114,21 @@
           <h2 class="sub-title-keyresult-detail fw-bold">Action Plan</h2>
           <div *ngFor="let action of keyResult.actionList" class="ms-2">
             <img
-              src="{{ action.isChecked ? '../assets/icons/bookmark-check.svg' : '../assets/icons/bookmark.svg' }}"
+              src="../assets/icons/checkmark.svg"
               alt="checkbox"
               class="action-checkbox me-1"
+              *ngIf="action.isChecked"
             />
-            <span [ngStyle]="{ 'text-decoration': action.isChecked ? 'line-through' : 'none' }">{{
-              action.action
-            }}</span>
+            <span [ngStyle]="{ 'text-decoration': action.isChecked ? 'line-through' : 'none' }">
+              <span *ngIf="!action.isChecked">-</span>
+              {{ action.action }}</span
+            >
           </div>
         </div>
 
         <div class="d-flex align-items-center flex-row justify-content-start">
           <button
             *ngIf="!isComplete && keyResult.writeable"
-            cdkFocusInitial
             color="primary"
             mat-flat-button
             (click)="checkForDraftState(keyResult)"
diff --git a/frontend/src/app/objective-detail/objective-detail.component.html b/frontend/src/app/objective-detail/objective-detail.component.html
index eb47906b95..026ce6e75a 100644
--- a/frontend/src/app/objective-detail/objective-detail.component.html
+++ b/frontend/src/app/objective-detail/objective-detail.component.html
@@ -15,10 +15,10 @@
 
       <div class="me-3">
         <p class="sub-title-objective fw-bold mb-1">Beschrieb</p>
-        <p class="linebreak" *ngIf="objective.description === ''">-</p>
-        <p *ngIf="objective.description !== ''" data-test-id="description" class="linebreak">
-          {{ objective.description }}
-        </p>
+        <div class="linebreak" *ngIf="objective.description === ''"><p>-</p></div>
+        <div *ngIf="objective.description !== ''" data-test-id="description" class="linebreak">
+          <p>{{ objective.description }}</p>
+        </div>
 
         <div
           class="d-flex align-items-center flex-row justify-content-start mt-4"
diff --git a/frontend/src/assets/icons/checkmark.svg b/frontend/src/assets/icons/checkmark.svg
new file mode 100644
index 0000000000..8f6d387b26
--- /dev/null
+++ b/frontend/src/assets/icons/checkmark.svg
@@ -0,0 +1,10 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="icon">
+<mask id="mask0_2504_20295" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="20" height="20">
+<rect id="Bounding box" width="20" height="20" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_2504_20295)">
+<path id="Vector" d="M2 12.3333L6.55285 17L18.1626 3" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</g>
+</svg>

From 21040cc55c59565ab2983e1ec41f1286efda9bdd Mon Sep 17 00:00:00 2001
From: Lias Kleisa <kleisa@puzzle.ch>
Date: Thu, 7 Dec 2023 11:39:19 +0100
Subject: [PATCH 6/7] Fix e2e tests

---
 frontend/cypress/e2e/checkIn.cy.ts                              | 2 +-
 .../src/app/keyresult-detail/keyresult-detail.component.html    | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/frontend/cypress/e2e/checkIn.cy.ts b/frontend/cypress/e2e/checkIn.cy.ts
index 2db7b73fe0..66b5d7bcd3 100644
--- a/frontend/cypress/e2e/checkIn.cy.ts
+++ b/frontend/cypress/e2e/checkIn.cy.ts
@@ -227,7 +227,7 @@ describe('OKR Check-in e2e tests', () => {
       cy.contains('STRETCH');
     });
 
-    it.only(`Should display confirm dialog when creating checkin on draft objective`, () => {
+    it(`Should display confirm dialog when creating checkin on draft objective`, () => {
       cy.getByTestId('add-objective').first().click();
       cy.fillOutObjective('draft objective title', 'safe-draft', '3');
       cy.visit('/?quarter=3');
diff --git a/frontend/src/app/keyresult-detail/keyresult-detail.component.html b/frontend/src/app/keyresult-detail/keyresult-detail.component.html
index 4a8b7361dc..6ee23cf54e 100644
--- a/frontend/src/app/keyresult-detail/keyresult-detail.component.html
+++ b/frontend/src/app/keyresult-detail/keyresult-detail.component.html
@@ -129,6 +129,7 @@ <h2 class="sub-title-keyresult-detail fw-bold">Action Plan</h2>
         <div class="d-flex align-items-center flex-row justify-content-start">
           <button
             *ngIf="!isComplete && keyResult.writeable"
+            cdkFocusInitial
             color="primary"
             mat-flat-button
             (click)="checkForDraftState(keyResult)"

From da9ec710c4476ab3fb829405e38021ec8a8749ba Mon Sep 17 00:00:00 2001
From: Lias Kleisa <kleisa@puzzle.ch>
Date: Thu, 7 Dec 2023 13:40:31 +0100
Subject: [PATCH 7/7] Adjust alignment of actionlist on kr detail

---
 .../keyresult-detail.component.html           | 21 +++++++++----------
 .../keyresult-detail.component.scss           |  8 +++++++
 .../check-in-form.component.html              |  2 +-
 .../check-in-form.component.scss              |  3 ++-
 frontend/src/style/styles.scss                |  4 ++++
 5 files changed, 25 insertions(+), 13 deletions(-)

diff --git a/frontend/src/app/keyresult-detail/keyresult-detail.component.html b/frontend/src/app/keyresult-detail/keyresult-detail.component.html
index 6ee23cf54e..87b361fb08 100644
--- a/frontend/src/app/keyresult-detail/keyresult-detail.component.html
+++ b/frontend/src/app/keyresult-detail/keyresult-detail.component.html
@@ -112,17 +112,16 @@
 
         <div *ngIf="keyResult.actionList?.length != 0" class="mt-3 mb-4">
           <h2 class="sub-title-keyresult-detail fw-bold">Action Plan</h2>
-          <div *ngFor="let action of keyResult.actionList" class="ms-2">
-            <img
-              src="../assets/icons/checkmark.svg"
-              alt="checkbox"
-              class="action-checkbox me-1"
-              *ngIf="action.isChecked"
-            />
-            <span [ngStyle]="{ 'text-decoration': action.isChecked ? 'line-through' : 'none' }">
-              <span *ngIf="!action.isChecked">-</span>
-              {{ action.action }}</span
-            >
+          <div *ngFor="let action of keyResult.actionList">
+            <div *ngIf="action.isChecked">
+              <div class="action-list-checked-item break-word ms-4">
+                <img src="../assets/icons/checkmark.svg" alt="checkbox" class="action-checkbox me-1" />
+                <span [ngStyle]="{ 'text-decoration': 'line-through' }"> {{ action.action }}</span>
+              </div>
+            </div>
+            <div *ngIf="!action.isChecked">
+              <div class="action-list-item break-word ms-4"><span class="me-2">-</span> {{ action.action }}</div>
+            </div>
           </div>
         </div>
 
diff --git a/frontend/src/app/keyresult-detail/keyresult-detail.component.scss b/frontend/src/app/keyresult-detail/keyresult-detail.component.scss
index 67fc5224c0..5134aa3298 100644
--- a/frontend/src/app/keyresult-detail/keyresult-detail.component.scss
+++ b/frontend/src/app/keyresult-detail/keyresult-detail.component.scss
@@ -82,3 +82,11 @@
     margin-bottom: 0.065rem !important;
   }
 }
+
+.action-list-item {
+  text-indent: -1.1rem;
+}
+
+.action-list-checked-item {
+  text-indent: -1.3rem;
+}
diff --git a/frontend/src/app/shared/dialog/checkin/check-in-form/check-in-form.component.html b/frontend/src/app/shared/dialog/checkin/check-in-form/check-in-form.component.html
index b3665513b8..a4c4819bcc 100644
--- a/frontend/src/app/shared/dialog/checkin/check-in-form/check-in-form.component.html
+++ b/frontend/src/app/shared/dialog/checkin/check-in-form/check-in-form.component.html
@@ -15,7 +15,7 @@
         <span *ngFor="let action of getActions(); let i = index" class="d-flex flex-row">
           <mat-checkbox #checkbox (change)="changeIsChecked($event, i)" [checked]="action.isChecked"></mat-checkbox>
           <span
-            class="action-list-item w-100"
+            class="action-list-item w-100 break-word"
             [ngStyle]="{ 'text-decoration': checkbox.checked ? 'line-through' : 'none' }"
           >
             {{ action.action }}
diff --git a/frontend/src/app/shared/dialog/checkin/check-in-form/check-in-form.component.scss b/frontend/src/app/shared/dialog/checkin/check-in-form/check-in-form.component.scss
index 6fee48c088..254acae034 100644
--- a/frontend/src/app/shared/dialog/checkin/check-in-form/check-in-form.component.scss
+++ b/frontend/src/app/shared/dialog/checkin/check-in-form/check-in-form.component.scss
@@ -2,7 +2,8 @@
 
 .action-list-item {
   background-color: $show-element;
-  height: 40px;
+  height: auto;
+  min-height: 40px;
   padding: 10px;
   margin: auto;
   color: black;
diff --git a/frontend/src/style/styles.scss b/frontend/src/style/styles.scss
index 71ea9ea3ba..facd2e410b 100644
--- a/frontend/src/style/styles.scss
+++ b/frontend/src/style/styles.scss
@@ -268,3 +268,7 @@ mat-form-field.quarter-filter .mat-mdc-text-field-wrapper {
 .h-0 {
   height: 0;
 }
+
+.break-word {
+  word-break: break-all;
+}