From b31f6b8b71539ba0f6897cd2c693c05debb2500c Mon Sep 17 00:00:00 2001
From: senne <sennebels@gmail.com>
Date: Mon, 13 Nov 2023 15:50:53 +0100
Subject: [PATCH 1/3] fix: :bug: fixed home scrolling through adding a
 container

---
 app/styles/components/_c-home.scss |  13 ++-
 app/templates/home.hbs             | 132 +++++++++++++++--------------
 2 files changed, 79 insertions(+), 66 deletions(-)

diff --git a/app/styles/components/_c-home.scss b/app/styles/components/_c-home.scss
index 0041f412..fe313ac8 100644
--- a/app/styles/components/_c-home.scss
+++ b/app/styles/components/_c-home.scss
@@ -1,5 +1,14 @@
 .c-home-text {
-  overflow-y: auto;
+  width: 600px;
+  height: 100%;
+}
+
+.c-home-text-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow-y: scroll;
+  height: 100%;
   width: 100%;
 }
 
@@ -21,7 +30,7 @@
 
   @include mq(medium) {
     > * {
-      padding: $au-unit-huge * 2;
+      padding-top: $au-unit-large;
       margin-left: auto;
       margin-right: auto;
     }
diff --git a/app/templates/home.hbs b/app/templates/home.hbs
index cae4b917..561b04c4 100644
--- a/app/templates/home.hbs
+++ b/app/templates/home.hbs
@@ -1,73 +1,77 @@
 <AuBodyContainer class="au-u-background-gray-100">
   <section class="c-home">
-    <div class="c-home-text">
-      <AuContent>
-        <AuHeading @level="1" @skin="2">Welkom bij Lokaal Beslist, jouw centrale
-          bron voor het ontdekken van agendapunten van lokale besturen.</AuHeading>
-        <div class="c-home__visual">
-          <img
-            src="/assets/homepage-visual.svg"
-            class="c-home-visual"
-            alt=""
-            {{!template-lint-disable require-valid-alt-text}}
-          />
-        </div>
-        <p>Blijf op de hoogte van waar lokale besturen mee bezig zijn en wat er
-          leeft in en rond je omgeving. Start eenvoudig door een gemeente te
-          selecteren of een zoekwoord in te voeren en krijg direct toegang tot
-          relevante informatie.</p>
-      </AuContent>
-      <div class="au-c-home__form au-o-flow">
-        <AuLabel
-          for={{"municipality"}}
-          class="au-u-hidden-visually"
-          @inline={{true}}
-        >
-          In welke gemeente(s) wil je zoeken?
-        </AuLabel>
-        <div
-          class="au-o-flow au-o-flow--small"
-          {{did-insert this.resetLoading}}
-        >
+    <div class="c-home-text-container">
 
-          <PowerSelectMultiple
-            @onChange={{this.handleMunicipalityChange}}
-            @selected={{this.selectedMunicipalities}}
-            @options={{this.municipalities}}
-            @allowClear={{true}}
-            @searchField="label"
-            @placeholder={{"Alle gemeentes"}}
-            @noMatchesMessage={{"Geen gemeentes gevonden"}}
-            @searchMessage="Aan het zoeken..."
-            @searchEnabled={{true}}
-            as |municipality|
+      <div class="c-home-text">
+        <AuContent>
+          <AuHeading @level="1" @skin="2">Welkom bij Lokaal Beslist, jouw
+            centrale bron voor het ontdekken van agendapunten van lokale
+            besturen.</AuHeading>
+          <div class="c-home__visual">
+            <img
+              src="/assets/homepage-visual.svg"
+              class="c-home-visual"
+              alt=""
+              {{!template-lint-disable require-valid-alt-text}}
+            />
+          </div>
+          <p>Blijf op de hoogte van waar lokale besturen mee bezig zijn en wat
+            er leeft in en rond je omgeving. Start eenvoudig door een gemeente
+            te selecteren of een zoekwoord in te voeren en krijg direct toegang
+            tot relevante informatie.</p>
+        </AuContent>
+        <div class="au-c-home__form au-o-flow">
+          <AuLabel
+            for={{"municipality"}}
+            class="au-u-hidden-visually"
+            @inline={{true}}
+          >
+            In welke gemeente(s) wil je zoeken?
+          </AuLabel>
+          <div
+            class="au-o-flow au-o-flow--small"
+            {{did-insert this.resetLoading}}
           >
-            {{municipality.label}}
-          </PowerSelectMultiple>
 
-          <AuInput
-            @queryParam="trefwoord"
-            @value={{this.keywordValue}}
-            @label="Zoeken"
-            @labelHidden={{true}}
-            @icon="search"
-            @width="block"
-            id="keyword"
-            placeholder="Zoek in alle lokale agendaputen"
-            class="au-c-form-row--button au-o-layout--large"
-            {{on "input" this.handleChange}}
-            {{on "keyup" this.handleKeyUp}}
-          />
-          <AuButton
-            @loading={{this.loading}}
-            @width="block"
-            {{on "click" this.handleMunicipalitySelect}}
-          >Bekijk agendapunten</AuButton>
+            <PowerSelectMultiple
+              @onChange={{this.handleMunicipalityChange}}
+              @selected={{this.selectedMunicipalities}}
+              @options={{this.municipalities}}
+              @allowClear={{true}}
+              @searchField="label"
+              @placeholder={{"Alle gemeentes"}}
+              @noMatchesMessage={{"Geen gemeentes gevonden"}}
+              @searchMessage="Aan het zoeken..."
+              @searchEnabled={{true}}
+              as |municipality|
+            >
+              {{municipality.label}}
+            </PowerSelectMultiple>
+
+            <AuInput
+              @queryParam="trefwoord"
+              @value={{this.keywordValue}}
+              @label="Zoeken"
+              @labelHidden={{true}}
+              @icon="search"
+              @width="block"
+              id="keyword"
+              placeholder="Zoek in alle lokale agendaputen"
+              class="au-c-form-row--button au-o-layout--large"
+              {{on "input" this.handleChange}}
+              {{on "keyup" this.handleKeyUp}}
+            />
+            <AuButton
+              @loading={{this.loading}}
+              @width="block"
+              {{on "click" this.handleMunicipalitySelect}}
+            >Bekijk agendapunten</AuButton>
+          </div>
+          <p class="au-u-text-center">
+            <AuLink @route="help">Meer informatie over agendapunten en
+              beslissingen</AuLink>
+          </p>
         </div>
-        <p class="au-u-text-center">
-          <AuLink @route="help">Meer informatie over agendapunten en
-            beslissingen</AuLink>
-        </p>
       </div>
     </div>
   </section>

From c5c81f7ce65f6c8fb78ad95cbeb2c013e5c00bba Mon Sep 17 00:00:00 2001
From: senne <sennebels@gmail.com>
Date: Mon, 13 Nov 2023 16:08:37 +0100
Subject: [PATCH 2/3] fix: :bug: added vertically focused media query

---
 .stylelintrc.js                    |  1 +
 app/styles/components/_c-home.scss | 11 +++++++++--
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/.stylelintrc.js b/.stylelintrc.js
index 18c76198..3a980601 100644
--- a/.stylelintrc.js
+++ b/.stylelintrc.js
@@ -3,6 +3,7 @@
 module.exports = {
   extends: ['stylelint-config-standard-scss', 'stylelint-prettier/recommended'],
   rules: {
+    'media-feature-range-notation': null,
     'selector-class-pattern': null, // This enforces kebab-case by default but we use BEM which isn't compatible
   },
 };
diff --git a/app/styles/components/_c-home.scss b/app/styles/components/_c-home.scss
index fe313ac8..2fdeb5b8 100644
--- a/app/styles/components/_c-home.scss
+++ b/app/styles/components/_c-home.scss
@@ -1,13 +1,20 @@
 .c-home-text {
   width: 600px;
-  height: 100%;
+  //Expected "context" media feature range notation  media-feature-range-notation
+  @media (max-height: 580px) {
+    height: 100%;
+  }
+
+  @media (min-height: 580px) {
+    height: auto;
+  }
 }
 
 .c-home-text-container {
   display: flex;
   justify-content: center;
   align-items: center;
-  overflow-y: scroll;
+  overflow-y: auto;
   height: 100%;
   width: 100%;
 }

From 794aa66f27cb35c1a47a299846b1e1ee36f3f440 Mon Sep 17 00:00:00 2001
From: senne <sennebels@gmail.com>
Date: Mon, 13 Nov 2023 16:09:05 +0100
Subject: [PATCH 3/3] refactor: :fire: removed comment

---
 app/styles/components/_c-home.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/styles/components/_c-home.scss b/app/styles/components/_c-home.scss
index 2fdeb5b8..57f6d562 100644
--- a/app/styles/components/_c-home.scss
+++ b/app/styles/components/_c-home.scss
@@ -1,6 +1,6 @@
 .c-home-text {
   width: 600px;
-  //Expected "context" media feature range notation  media-feature-range-notation
+
   @media (max-height: 580px) {
     height: 100%;
   }