browse,search,history space bottom equal to sides

Author: supalarry

frontend/src/components/app/recommendations/HistoryRecommendations.vue

@@ -1,6 +1,6 @@
 <template>
   <!-- eslint-disable max-len -->
-  <section class="sm:mb-16 lg:mb-32">
+  <section class="mb-4 sm:mb-16 lg:mb-32">
     <div v-if="recommendationsBackup.length" v-bind:class="{
       'flex': true,
       'w-full': true,

frontend/src/components/app/recommendations/Recommendations.vue

@@ -1,6 +1,6 @@
 <template>
   <!-- eslint-disable max-len -->
-  <section class="sm:mb-16 lg:mb-32">
+  <section class="mb-4 sm:mb-16 lg:mb-32">
     <h1
       class="text-5xl my-4 text-center md:text-left leading-none onboarding-sub-container-content-heading">
       {{recommendations.length}} {{title}}</h1>

frontend/src/views/app/Browse.vue

@@ -1,7 +1,7 @@
 <template>
   <!-- eslint-disable max-len -->
   <div class="mx-4 sm:mx-16 lg:mx-32">
-    <section class="mx-auto">
+    <section class="mx-auto relative">
       <div v-if="!recommendationsAnalysisDone" class="flex items-center justify-center mt-32">
         <img class="h-36" src="../../assets/loading.svg">
       </div>
@@ -12,7 +12,7 @@
         v-bind:title="'Potential matches'"
         v-bind:recommendationsReceived="recommendations"
         v-bind:recommendationsAnalysis="recommendationsAnalysis"></Recommendations>
-      <div id="invisibleFooter" class="h-4 w-full bg-white"></div>
+      <div id="invisibleFooter" class="h-4 absolute bottom-0 w-full"></div>
       <ScrollUpButton></ScrollUpButton>
     </section>
   </div>

frontend/src/views/app/History.vue

@@ -4,7 +4,7 @@
     <div v-if="!historyFetched" class="mx-auto flex items-center justify-center mt-32">
       <img class="h-36" src="../../assets/loading.svg">
     </div>
-    <section v-bind:class="{'mx-auto': true, 'mt-4': true, 'invisible': !historyFetched}">
+    <section v-bind:class="{'mx-auto': true, 'mt-4': true, 'invisible': !historyFetched, 'relative': true,}">
       <div class="flex items-center justify-center md:justify-start w-full mb-4">
         <h1
           class="text-3xl sm:text-5xl my-4 inline-block text-center leading-none onboarding-sub-container-content-heading">
@@ -24,7 +24,7 @@
         v-bind:title="'Potential matches'"
         v-bind:recommendationsReceived="recommendations"
         v-bind:recommendationsAnalysis="recommendationsAnalysis"></HistoryRecommendations>
-      <div id="invisibleFooterHistory" class="h-4 w-full bg-white"></div>
+      <div id="invisibleFooterHistory" class="h-4 absolute bottom-0 w-full"></div>
       <ScrollUpButton></ScrollUpButton>
     </section>
   </div>

frontend/src/views/app/Search.vue

@@ -1,6 +1,6 @@
 <template>
   <!-- eslint-disable max-len -->
-  <div class="mx-4 sm:mx-16 lg:mx-32">
+  <div class="mx-4 sm:mx-16 lg:mx-32 relative">
     <div v-if="!recommendationsAnalysisDone && !sliderValuesFetched" class="mx-auto flex items-center justify-center mt-32">
       <img class="h-36" src="../../assets/loading.svg">
     </div>
@@ -16,7 +16,8 @@
         v-bind:recommendationsAnalysis="filters"></Recommendations>
       <ScrollUpButton></ScrollUpButton>
     </section>
-    <div id="invisibleFooterSearch" class="h-4 w-full bg-white"></div>
+    <div id="invisibleFooterSearch"
+         v-bind:class="{'h-4': true, 'absolute': true, 'bottom-0': true, 'w-full': true, 'invisible': !recommendationsAnalysisDone}"></div>
     <section v-on:click="setError(null)"
              v-if="!recommendationsAnalysisDone && sliderValuesFetched"
              class="flex flex-col my-8 md:my-12">