From e1171ed02616a40eb9022cfb01c5ce754dfc9cc7 Mon Sep 17 00:00:00 2001
From: ihor-romaniuk <ihor.romaniuk@raccoongang.com>
Date: Fri, 3 May 2024 10:47:56 +0200
Subject: [PATCH] fix: responsive for mobile devices

---
 feedback/static/css/feedback.css | 95 ++++++++++++++++----------------
 1 file changed, 48 insertions(+), 47 deletions(-)

diff --git a/feedback/static/css/feedback.css b/feedback/static/css/feedback.css
index 5902881..9c5981a 100644
--- a/feedback/static/css/feedback.css
+++ b/feedback/static/css/feedback.css
@@ -4,10 +4,9 @@
    border around it. */
 .feedback_block {
     display: inline-block;
-    border-width: 1px;
-    border-style: solid;
-    border-color: rgba(0,0,0,0.1);
-    padding: 10px
+    border: 1px solid rgba(0, 0, 0, .1);
+    padding: 10px;
+    max-width: 100%;
 }
 
 /* Little thank you message div after people vote */
@@ -18,52 +17,53 @@
 /* Label for the freeform text input. We want a little
    space between this and the Likert input.*/
 .feedback_block .feedback_header_div {
-    margin-top:1em;
+    margin-top: 1em;
 }
 
 /* Fieldset for the Likert radio buttons */
 .feedback_block .feedback_likert_field {
-    padding: 0px;
-    margin: 0px;
+    padding: 0;
+    margin: 0;
 }
 
 /* The div around everything with a radio button */
 .feedback_block .feedback_likert_rating {
     cursor: pointer;
-    border-radius:5px;
-    display:inline-block;
-    text-align:center;
-    padding:0px 10px 0px 10px;
+    border-radius: 5px;
+    display: inline-block;
+    text-align: center;
+    padding: 0 10px;
 }
 
 /* Hide checked icon */
-.feedback_icon_active { display:none; }
-.feedback_icon_inactive { display:inline-block; }
+.feedback_icon_active {
+    display: none;
+}
+
+.feedback_icon_inactive {
+    display: inline-block;
+}
 
 /* But show it if we are checked... */
-.feedback_block input[type="radio"]:checked ~ .feedback_icon_active{
+.feedback_block input[type="radio"]:checked ~ .feedback_icon_active {
     display: inline-block;
 }
+
 /* ... while hiding the unchecked icon */
-.feedback_block input[type="radio"]:checked ~ .feedback_icon_inactive{
+.feedback_block input[type="radio"]:checked ~ .feedback_icon_inactive {
     display: none;
 }
 
 .feedback_icon {
-   border-style:solid;
-   border-width: 1px;
-   border-color: rgba(255,255,255,0);
-   padding:1px;
-   height:60px;
-   width: 60px;
-}
-
-.feedback_block input[type="radio"]:focus ~ .feedback_icon {
-   border-color: #999999;
+    border: 1px solid rgba(255, 255, 255, 0);
+    padding: 1px;
+    height: 60px;
+    width: 60px;
 }
 
+.feedback_block input[type="radio"]:focus ~ .feedback_icon,
 .feedback_block input[type="radio"]:hover ~ .feedback_icon {
-   border-color: #999999;
+    border-color: #999;
 }
 
 .feedback_block .feedback_likert_label {
@@ -75,7 +75,7 @@
 }
 
 .feedback_block .feedback_freeform_area {
-    height:inherit;
+    height: inherit;
     width: 100%;
 }
 
@@ -86,37 +86,38 @@
 }
 
 .feedback_block .feedback_radio {
-    opacity:0;
-    width:1px;
-    padding:0px;
-    margin:0px;
-    position:absolute;
+    opacity: 0;
+    width: 1px;
+    padding: 0;
+    margin: 0;
+    position: absolute;
 }
 
-.feedback_block .feedback_sr_text{
-    opacity:0;
-    width:1px;
-    height:1px;
-    padding:0px;
-    margin:0px;
-    position:absolute;
-    clip:rect(1px,1px,1px,1px);
-    left:-10000px;
-    overflow:hidden;
+.feedback_block .feedback_sr_text {
+    opacity: 0;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: 0;
+    position: absolute;
+    clip: rect(1px, 1px, 1px, 1px);
+    left: -10000px;
+    overflow: hidden;
 }
 
-.feedback_block label{
-    display:inline;
+.feedback_block label {
+    display: inline;
 }
 
 .feedback_block .feedback_likert_field {
-    border-style:none;
+    border-style: none;
 }
+
 .feedback_block .feedback_submit_feedback {
-    width:100%;
+    width: 100%;
 }
 
 .feedback_likert_scale {
     display: flex;
-    flex-direction: row;
+    flex-flow: row wrap;
 }