From 54f3aa40dc4d8268e7215d56af5d63e0b8656214 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Wed, 3 Apr 2024 11:56:48 +0200
Subject: [PATCH] Fix some alignment issues with matrix questions in surveys

Resolves MS-911 #complete
---
 client/src/styles/_forms.scss  | 13 ++++++-------
 client/src/styles/_survey.scss | 17 +++++++++++------
 2 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/client/src/styles/_forms.scss b/client/src/styles/_forms.scss
index 137a365e..0ea4d148 100644
--- a/client/src/styles/_forms.scss
+++ b/client/src/styles/_forms.scss
@@ -34,9 +34,9 @@ $icon-size: 20px;
   display: inline-flex;
   flex-direction: row;
   align-items: center;
-  margin-right: 10px;
   cursor: pointer;
   width: auto;
+  gap: $small-spacing;
 
   svg {
     width: 15px;
@@ -46,7 +46,7 @@ $icon-size: 20px;
     display: none;
   }
 
-  &__input:checked + &__checkbox {
+  &__input:checked+&__checkbox {
     border: 0;
     background-color: $color-brand;
 
@@ -65,7 +65,6 @@ $icon-size: 20px;
     justify-content: center;
     align-items: center;
     box-sizing: border-box;
-    margin-right: 10px;
     transition: background-color 0.5s;
   }
 
@@ -88,7 +87,7 @@ $icon-size: 20px;
     }
   }
 
-  &__input:checked + &__radiobutton {
+  &__input:checked+&__radiobutton {
     border-color: $color-brand;
 
     svg {
@@ -105,7 +104,7 @@ $icon-size: 20px;
   &--survey {
     margin-bottom: $small-spacing;
 
-    #{$base}__input:checked + #{$base}__radiobutton {
+    #{$base}__input:checked+#{$base}__radiobutton {
       background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle fill="%2317A887" r="25" cx="50" cy="50"></circle></svg>');
       background-size: 12px 12px;
       background-repeat: no-repeat;
@@ -114,7 +113,7 @@ $icon-size: 20px;
       height: $icon-size;
     }
 
-    #{$base}__input:checked + #{$base}__checkbox {
+    #{$base}__input:checked+#{$base}__checkbox {
       background-image: url('data:image/svg+xml;utf8,<svg id="shape" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><polygon fill="%23FFFFFF" points="41.46 77.72 10 46.26 16.89 39.37 41.46 63.93 83.11 22.28 90 29.18 41.46 77.72"/></svg>');
       background-size: 12px 12px;
       background-repeat: no-repeat;
@@ -126,7 +125,7 @@ $icon-size: 20px;
     #{$base}__label-container {
       display: -ms-grid;
       display: grid;
-      grid-template-columns: 30px 1fr;
+      grid-template-columns: 20px 1fr;
       align-items: start;
       justify-content: center;
     }
diff --git a/client/src/styles/_survey.scss b/client/src/styles/_survey.scss
index bd13a4f8..1197e78d 100644
--- a/client/src/styles/_survey.scss
+++ b/client/src/styles/_survey.scss
@@ -17,7 +17,7 @@
     margin-bottom: $large-spacing;
     font-size: 1rem;
 
-    > span > span {
+    >span>span {
       // weird survey.js html structure
       @include heading-4;
     }
@@ -31,7 +31,7 @@
     @include heading-4;
     margin-bottom: $medium-spacing;
 
-    > span > span {
+    >span>span {
       // weird survey.js html structure
       @include heading-4;
       line-height: $default-line-height;
@@ -77,7 +77,7 @@
     display: flex;
     margin-left: auto;
 
-    > span {
+    >span {
       position: absolute;
       width: 100%;
       text-align: right;
@@ -97,7 +97,7 @@
 
     height: 100%;
 
-    > span {
+    >span {
       position: absolute;
       width: 100%;
       text-align: right;
@@ -130,7 +130,8 @@
   display: flex;
   width: 100%;
   flex-direction: row;
-  > td {
+
+  >td {
     @include small-text;
   }
 }
@@ -142,7 +143,7 @@
     @include table-row;
     border-top: 1px solid $color-silver;
 
-    > td {
+    >td {
       display: flex;
       align-items: center;
     }
@@ -155,6 +156,7 @@
     vertical-align: middle;
     justify-content: center;
     flex: 1;
+    text-align: left;
 
     @include small-text;
 
@@ -206,6 +208,7 @@
 
   justify-content: center;
   display: flex;
+  text-align: left;
 
   &:first-child {
     justify-content: flex-start;
@@ -249,9 +252,11 @@
   display: flex;
   flex-direction: column;
   row-gap: $medium-spacing;
+
   tr {
     width: 100%;
   }
+
   tbody {
     flex-direction: column;
     row-gap: $medium-spacing;