From f227b60c9ef7c37247387957a14ef970f781831d Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <muhammed@freecodecamp.org>
Date: Mon, 14 Nov 2022 09:19:03 +0200
Subject: [PATCH] feat(client): change the layout of lowerjaw hint and test to
 flex (#48322)

* feat(client): change the layout of lowerjaw hint and test description to flex

* remove the align center, and fix the margins

* Revert mistake

* add RTL layout support

* Remove global variables, and add gap for spacing
---
 client/src/templates/Challenges/classic/editor.css | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/client/src/templates/Challenges/classic/editor.css b/client/src/templates/Challenges/classic/editor.css
index 38a09aa891a..f8dee622650 100644
--- a/client/src/templates/Challenges/classic/editor.css
+++ b/client/src/templates/Challenges/classic/editor.css
@@ -117,14 +117,13 @@ textarea.inputarea {
 }
 
 .test-feedback p {
-  margin: 0.5rem 0 0;
+  margin: 0.45rem 0 0;
   font-family: 'Lato', sans-serif;
 }
 
 .test-feedback h2 {
   font-size: 1rem;
   line-height: 1.5;
-  padding-right: 0.5rem;
   /* using float instead of inline display so screen readers recognize h2 as a block element */
   float: left;
   margin: 0.5em 0 0;
@@ -137,18 +136,21 @@ textarea.inputarea {
 .test-feedback svg {
   height: 1.5rem;
   width: auto;
-  margin-right: 0.5rem;
-  margin-top: 0.6rem;
+  margin-top: 0.5rem;
 }
 
-.test-feedback > div {
+.test-feedback .test-status,
+.test-feedback .hint-status {
   margin-top: 1rem;
   display: flex;
+  gap: 0.5rem;
   flex-direction: row;
 }
 
 .test-status-description,
 .hint-description {
+  display: flex;
+  gap: 0.5rem;
   width: 100%;
 }
 
@@ -174,11 +176,11 @@ textarea.inputarea {
 .lower-jaw-icon-bar {
   overflow: hidden;
   display: flex;
+  gap: 10px;
   flex-direction: row;
 }
 .lower-jaw-icon-bar > button {
   line-height: 0;
-  margin-right: 10px;
 }
 
 .lower-jaw-icon-bar > button:focus {