align icons

Author: jpabloms2

front/src/pods/trainer/components/header.component.tsx

@@ -50,18 +50,20 @@ export const CopyFieldComponent: React.FC<CopyFieldProps> = props => {
 
   return (
     <>
-      <label
-        className={innerClasses.label}
-        htmlFor={inputId}
-        onClick={handleClick}
-      >
-        {labelName}
-        {open ? (
-          <ExpandLessIcon className={innerClasses.collapseIcon} />
-        ) : (
-          <ExpandMoreIcon className={innerClasses.collapseIcon} />
-        )}
-      </label>
+      <div className={innerClasses.labelContainer}>
+        <label
+          className={innerClasses.label}
+          htmlFor={inputId}
+          onClick={handleClick}
+        >
+          {labelName}
+          {open ? (
+            <ExpandLessIcon className={innerClasses.collapseIcon} />
+          ) : (
+            <ExpandMoreIcon className={innerClasses.collapseIcon} />
+          )}
+        </label>
+      </div>
       <Collapse in={open} timeout="auto" unmountOnExit>
         <div className={innerClasses.inputContainer}>
           <input

front/src/pods/trainer/components/header.styles.ts

@@ -9,17 +9,28 @@ export const root = css`
   grid-row-gap: 1rem;
   grid-column-gap: 1rem;
 `;
+export const labelContainer = css`
+  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+`;
 
 export const label = css`
   font-family: ${typography.fontFamily};
   font-size: 1.125rem;
   color: ${palette.text.primary};
   display: flex;
+  justify-content: space-between;
+  width: 50%;
   cursor: pointer;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
   & :hover {
     background-color: rgba(0, 0, 0, 0.12);
   }
+
+  @media (min-width: ${theme.breakpoints.values.sm}px) {
+    width: 30%;
+  }
+  @media (min-width: ${theme.breakpoints.values.lg}px) {
+    width: 25%;
+  }
 `;
 
 export const collapseIcon = css`