Shrink footer section desktop & mobile

frontend/src/components/QuickAdd.tsx

@@ -185,7 +185,7 @@ export const QuickAdd = ({
   };
 
   const getSearchClasses = () => {
-    let classes = "col-3 footer-field ";
+    let classes = "quick-add-input ";
     if (search.text != "") classes += issue ? "valid" : "invalid";
     return classes;
   };
@@ -242,70 +242,69 @@ export const QuickAdd = ({
   };
 
   return (
-    <div>
-      <h2> Add a new row</h2>
-      <div className="row">
-        <label htmlFor="input-issue" className="col-3 input-label hidden">
-          Issue (e.g. 3499) / free text
-        </label>
-        <label htmlFor="select-activity" className="col-3 select-label hidden">
-          Select activity
-        </label>
-      </div>
-      <div className="row">
-        <input
-          id="input-issue"
-          aria-keyshortcuts="ctrl+a"
-          ref={issueInputRef}
-          autoComplete="off"
-          className={getSearchClasses()}
-          type="text"
-          onKeyUp={(ev) => {
-            handleInputToAutocompleteFocus(ev);
-          }}
-          min={0}
-          onChange={(e) => {
-            setSearch({ ...search, text: e.target.value });
-            setIssue(null);
-          }}
-          title={(issue && issue.subject) || ""}
-        />
-        <img
-          className={
-            search.text === "" ? "validation-icon hiden" : "validation-icon"
-          }
-          src={getValidationIconSrc()}
-          alt="Validity"
-          aria-label="Indicator for validity of issue number - x for not valid, check for valid."
-        />
-        <select
-          className="col-3 footer-field"
-          name="activity"
-          id="select-activity"
-          onChange={handleSetActivity}
-          style={{ width: "50%" }}
-        >
-          {activities &&
-            activities.map((activity) => {
-              return (
-                <option value={activity.id} key={activity.id}>
-                  {activity.name}
-                </option>
-              );
-            })}
-        </select>
-        <button className="col-3 basic-button plus-button" onClick={handleAdd}>
-          <img src={plus} alt="Add line" />
-        </button>
+    <div className="quick-add-wrapper">
+      <div className="quick-add">
+        <div className="quick-add-input-wrapper">
+          <label htmlFor="input-issue">Search issue</label>
+          <input
+            id="input-issue"
+            placeholder="3499, analysis, ..."
+            aria-keyshortcuts="ctrl+a"
+            ref={issueInputRef}
+            autoComplete="off"
+            className={getSearchClasses()}
+            type="text"
+            onKeyUp={(ev) => {
+              handleInputToAutocompleteFocus(ev);
+            }}
+            min={0}
+            onChange={(e) => {
+              setSearch({ ...search, text: e.target.value });
+              setIssue(null);
+            }}
+            title={(issue && issue.subject) || ""}
+          />
+          <img
+            className={
+              search.text === "" ? "validation-icon hidden" : "validation-icon"
+            }
+            src={getValidationIconSrc()}
+            alt="Validity"
+            aria-label="Indicator for validity of issue number - x for not valid, check for valid."
+          />
+        </div>
+        <div className="quick-add-input-wrapper">
+          <label htmlFor="select-activity">Select activity</label>
+          <select
+            className="quick-add-input"
+            name="activity"
+            id="select-activity"
+            onChange={handleSetActivity}
+          >
+            {activities &&
+              activities.map((activity) => {
+                return (
+                  <option value={activity.id} key={activity.id}>
+                    {activity.name}
+                  </option>
+                );
+              })}
+          </select>
+        </div>
+        <div className="quick-add-input-wrapper">
+          <button className="basic-button add-button" onClick={handleAdd}>
+            Add row
+          </button>
+        </div>
       </div>
       {search.suggestions.length > 0 && isAutoCompleteVisible && (
         <ul
           id="suggestions-ul"
-          className="col-8 autocomplete-container"
+          className="autocomplete-container"
           ref={suggestionsRef}
         >
           {search.suggestions.map((item, index) => (
-            <li key={item.id} className="autocomplete-item">
+            <li key={item.id}>
               <button
                 id={"suggestion-btn-" + index.toString()}
                 onKeyUp={(ev) => {

frontend/src/index.css

@@ -179,20 +179,6 @@ Other button classes are defined further down together with other classes for th
   }
 }
 
-.input-label {
-  margin-left: 0.4rem;
-  margin-top: 0.5rem;
-}
-
-.select-label {
-  margin-left: 0.75rem;
-  margin-top: 0.5rem;
-}
-
-.footer-field {
-  margin-left: 1rem;
-}
-
 .header-year {
   font-size: 2.25rem;
   color: hsl(186deg 92% 11%);
@@ -362,7 +348,7 @@ Other button classes are defined further down together with other classes for th
 
 .footer-container {
   margin-top: 0.2rem;
-  padding: 0.5rem 1rem;
+  padding: 1rem;
   background-color: hsl(0deg 0% 97%);
   display: flex;
 }
@@ -438,30 +424,30 @@ Other button classes are defined further down together with other classes for th
 }
 
 .save-button {
-  margin: 1rem 2rem 2rem;
   min-width: 10rem;
   padding: 1rem 1.5rem;
 }
 
 .save-changes {
+  display: flex;
+  flex-direction: column;
+  align-items: end;
   justify-content: end;
-  text-align: end;
+  flex-grow: 1;
+  margin-left: 2rem;
 }
 
-.plus-button {
-  width: 4.5rem;
+.add-button {
   background-color: hsl(288deg 46% 22%);
-  margin-left: 1rem;
+  padding: 0 1rem;
+  height: 2rem;
+  min-width: 6rem;
 }
 
-.plus-button:hover {
+.add-button:hover {
   background-color: hsl(276deg 46% 16%);
 }
 
-.plus-button img {
-  width: 1.8rem;
-}
-
 .star-icon {
   width: 1.7rem;
 }
@@ -497,32 +483,45 @@ Other button classes are defined further down together with other classes for th
   height: 2rem;
 }
 
+.quick-add-wrapper {
+  flex-grow: 3;
+}
+
+.quick-add {
+  align-items: flex-end;
+  display: flex;
+}
+
 .quick-add-input {
-  padding: 0.5rem 0.75rem;
-  margin: 0 0 0 3.75rem;
+  width: 100%;
+  height: 2rem;
+}
+
+.quick-add label {
+  font-size: 0.8rem;
+  color: hsl(276deg 46% 16%);
+}
+
+.quick-add-input-wrapper {
+  position: relative;
+  width: 33%;
+  padding-right: 0.5rem;
 }
 
 .autocomplete-container {
   max-height: 10rem;
-  margin-left: -3.2em;
-  margin-top: 0.6em;
+  padding: 0;
   list-style-type: none;
   overflow-y: auto;
-  z-index: 1;
-}
-
-.autocomplete-item {
-  padding: 0 0 0 24px;
-  width: 100%;
-  box-sizing: border-box;
+  width: 66%;
 }
 
 .autocomplete-button {
   background-color: white;
   width: 100%;
   text-align: left;
   border: none;
-  padding: 0.5rem 1rem;
+  padding: 0.5rem;
 }
 
 .autocomplete-button:focus {
@@ -535,6 +534,32 @@ Other button classes are defined further down together with other classes for th
   outline: none;
 }
 
+@media (max-width: 700px) {
+  .footer-container,
+  .quick-add {
+    flex-direction: column;
+    align-items: flex-start;
+    width: 100%;
+  }
+
+  .quick-add-input-wrapper {
+    width: 100%;
+  }
+
+  .save-changes {
+    margin-left: 0;
+    width: 100%;
+  }
+
+  .add-button {
+    margin: 0.5rem 0 1rem;
+  }
+
+  .autocomplete-container {
+    width: 100%;
+  }
+}
+
 .invalid {
   border: 2px solid hsl(17deg 91% 31%);
 }
@@ -544,20 +569,21 @@ Other button classes are defined further down together with other classes for th
 }
 
 .validation-icon {
-  width: 3.5rem;
-  margin-left: -3.8rem;
+  position: absolute;
+  height: 2rem;
+  right: 1rem;
 }
 
-.hiden {
+.hidden {
   visibility: hidden;
 }
 
 /* The unsaved changes alert message box */
-.unsaved-alert-p {
+.unsaved-alert {
   color: hsl(26deg 91% 42%); /* Red */
-  margin-right: 2rem;
-  text-align: right;
   min-height: 2rem;
+  margin: 0;
+  white-space: nowrap;
 }
 
 .comment-container {
@@ -778,12 +804,6 @@ Other button classes are defined further down together with other classes for th
   width: 0.7rem;
 }
 
-@media (max-width: 992px) {
-  .hidden {
-    visibility: hidden;
-  }
-}
-
 .row-focused {
   background-color: hsl(186deg 30% 94%);
 }

frontend/src/pages/Report.tsx

@@ -835,23 +835,21 @@ export const Report = () => {
         </main>
         <div className="footer">
           <section className="footer-container">
-            <div className="col-8">
-              <QuickAdd
-                addIssueActivity={addIssueActivityHandler}
-                toastList={toastList}
-                onToastListUpdate={handleToastListUpdate}
-                issueInputRef={issueInputRef}
-              ></QuickAdd>
-            </div>
+            <QuickAdd
+              addIssueActivity={addIssueActivityHandler}
+              toastList={toastList}
+              onToastListUpdate={handleToastListUpdate}
+              issueInputRef={issueInputRef}
+            ></QuickAdd>
             {toastList.length > 0 && (
               <Toast onCloseToast={handleCloseToast} toastList={toastList} />
             )}
-            <div className="col-4 save-changes">
-              <div className="unsaved-alert-p">
-                {showUnsavedWarning && (
-                  <p role="status">⚠ You have unsaved changes</p>
-                )}
-              </div>
+            <div className="save-changes">
+              {showUnsavedWarning && (
+                <p role="status" className="unsaved-alert">
+                  ⚠ You have unsaved changes
+                </p>
+              )}
               <button
                 className="basic-button save-button"
                 aria-keyshortcuts="ctrl+s"