style vocablist

frontend/src/App.css

@@ -1,4 +1,5 @@
 #app {
+    height: 100%;
     width: 100%;
     padding: 0;
     margin: 0;

frontend/src/components/VocabList/VocabList.css

@@ -17,24 +17,25 @@
     flex-direction: column;
     justify-content: space-between;
     align-content: center;
-    width: 100%;
     max-width: 300px;
     gap: 10px;
 }
 
-#search-section-input-and-button{
+
+#search-section-input-and-button {
     display: flex;
-    justify-content: space-between;
+    /*justify-content: space-between;*/
     gap: 10px;
-    width: 95%;
+    max-height: 50px;
 }
 
 #input {
-    margin: 0 0 0 3px;
-    width: 100%;
+    margin: 0;
     border-radius: 0.5rem;
+    width: 70%;
 }
 
+
 #reset-button {
     margin: 0;
 }

frontend/src/components/VocabList/VocabList.tsx

@@ -69,11 +69,14 @@ export default function VocabList(props: Readonly<Props>) {
 
     return (<div id={"vocab-list"}>
 
-        <div id={"search-section"}>
+        <div id={"search-section"}
+        >
             <label htmlFor={"search-field"}>Search vocabulary by
                 translation</label>
             <div id={"search-section-input-and-button"}>
                 <input id={"input"}
+                       className={`${props.calendarMode ? "input-calendar-mode" :
+                           "input-backlog-mode"}`}
                        value={searchTerm}
                        onChange={handleChangeInput}/>
                 <button id={"reset-button"}

frontend/src/components/VocabListItem/VocabListItem.css

@@ -13,6 +13,7 @@
     margin: 10px;
     padding: 20px;
     width: 15rem;
+    height: auto;
 }
 
 #text-wrapper {
@@ -22,7 +23,6 @@
     gap: 10px;
     margin: 0;
     padding: 0 20px 0 0;
-    height: 100%;
     line-height: 25px;
     word-wrap: break-word;
 }
@@ -42,7 +42,6 @@
     gap: 0;
     margin: 0;
     padding: 0;
-    height: 100%;
     word-wrap: break-word;
 }
 
@@ -63,12 +62,13 @@
     padding: 0;
     display: flex;
     flex-direction: column;
+    gap: 10px;
     right: 2px;
     justify-content: space-evenly;
 }
 
 .list-item-button {
-    height: 25%;
+    height: 30%;
 }
 
 .de_activate-button-non-editable-vocab {

frontend/src/pages/BacklogPage/BacklogPage.tsx

@@ -31,7 +31,7 @@ export default function BacklogPage(props: Readonly<Props>) {
     }
 
     return (<div id={"backlog-page"} className={"page"} role={"main"}>
-        <div style={{height: "50px"}}/>
+        <div style={{height: "40px"}}/>
         <VocabList vocabs={props.vocabs}
                    calendarMode={false}
                    activateVocab={props.activateVocab}

frontend/src/pages/HomePage/HomePage.css

@@ -1,7 +1,8 @@
 #homepage {
-    height: 65vh;
+    height: 50vh;
     justify-content: flex-end;
 }
+
 #homepage-text-and-button {
     width: 70%;
     max-width: 300px;