From bdda02773436c570e2c56abead7b088b89ba3e87 Mon Sep 17 00:00:00 2001
From: Dat <dat.nguyen@wikimedia.de>
Date: Tue, 15 Jul 2025 10:14:50 +0200
Subject: [PATCH 1/7] Add complaint link and redesign footer

---
 src/App.vue                    |   6 +-
 src/components/Layout/Foot.vue | 133 +++++++++++++++++++++++++--------
 2 files changed, 102 insertions(+), 37 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 47e13a4e..fb6c8cb8 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -5,7 +5,7 @@
       <v-container v-else class="full-height-content">
         <router-view></router-view>
       </v-container>
-      <Foot :class="{'tall-footer': customLayout}"></Foot>
+      <Foot></Foot>
       <Interval
         v-if="this.$store.getters.isLoggedIn && !this.$store.getters.currentUser.verified"
         :callback="checkVerified"
@@ -48,8 +48,4 @@ export default {
   .full-height-content {
     height: 100%
   }
-
-.tall-footer.footer {
-  height: 100%;
-}
 </style>
diff --git a/src/components/Layout/Foot.vue b/src/components/Layout/Foot.vue
index df1ffef6..be17c17e 100644
--- a/src/components/Layout/Foot.vue
+++ b/src/components/Layout/Foot.vue
@@ -1,44 +1,113 @@
 <template>
-  <footer data-test-id="footer" class="footer">
-  <v-footer color="primary lighten-1">
-    <v-container>
-      <ul class="footer-list">
-          <li><a target="_blank" rel="noopener noreferrer" href="https://wikiba.se/about-us/">About</a></li>
-          <li><router-link to="/discovery">Discovery</router-link></li>
-          <li><a target="_blank" rel="noopener noreferrer" href="https://www.mediawiki.org/wiki/Wikibase/Wikibase.cloud">Documentation</a></li>
-          <li><a target="_blank" rel="noopener noreferrer" href="https://status.wikibase.cloud">Platform Status</a></li>
-          <li><a target="_blank" rel="noopener noreferrer" href="https://github.com/wbstack">Github</a></li>
-          <li><router-link to="/privacy-policy">Privacy Policy</router-link></li>
-          <li><router-link to="/terms-of-use">Terms of Use</router-link></li>
-          <li><a target="_blank" rel="noopener noreferrer" href="https://www.wikimedia.de/impressum/">Imprint</a></li>
-          <li><router-link to="/contact">Contact</router-link></li>
-      </ul>
-    </v-container>
+  <v-footer data-test-id="footer" class="footer">
+    <v-row :class="['row-margin', { 'small-row-margin': isNarrow }]" no-gutters>
+      <v-col :class="['col-margin', { 'small-col-margin': isNarrow }]" ref="col1" cols="auto">
+        <nav aria-label="Wikibase Cloud links">
+          <h3 class="footer-list-title">Wikibase Cloud</h3>
+          <ul class="footer-list">
+            <li><a target="_blank" rel="noopener noreferrer" href="https://wikiba.se/about-us/">About</a></li>
+            <li><router-link to="/discovery">Discovery</router-link></li>
+            <li><a target="_blank" rel="noopener noreferrer" href="https://www.mediawiki.org/wiki/Wikibase/Wikibase.cloud">Documentation</a></li>
+            <li><a target="_blank" rel="noopener noreferrer" href="https://status.wikibase.cloud">Platform Status</a></li>
+            <li><a target="_blank" rel="noopener noreferrer" href="https://github.com/wbstack">GitHub</a></li>
+            <li><router-link to="/contact">Contact us</router-link></li>
+          </ul>
+        </nav>
+      </v-col>
+      <v-col ref="col2" cols="auto">
+        <nav aria-label="Legal links">
+          <h3 class="footer-list-title">Legal</h3>
+          <ul class="footer-list">
+            <li><router-link to="/privacy-policy">Privacy Policy</router-link></li>
+            <li><router-link to="/terms-of-use">Terms of Use</router-link></li>
+            <li><a target="_blank" rel="noopener noreferrer" href="https://www.wikimedia.de/impressum/">Imprint</a></li>
+            <li><router-link to="/complaint">Report illegal content</router-link></li>
+          </ul>
+        </nav>
+      </v-col>
+    </v-row>
   </v-footer>
-
-  </footer>
 </template>
 
 <script>
 export default {
-  name: 'Foot'
+  name: 'Foot',
+  data() {
+    return {
+      isNarrow: false,
+      totalColsWidth: 0
+    }
+  },
+  mounted() {
+    this.updateWidths();
+    window.addEventListener('resize', this.updateWidths);
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.updateWidths);
+  },
+  methods: {
+    updateWidths() {
+      // Get widths of both columns
+      const col1 = this.$refs.col1?.$el || this.$refs.col1;
+      const col2 = this.$refs.col2?.$el || this.$refs.col2;
+      const col1Width = col1 ? col1.offsetWidth : 0;
+      const col2Width = col2 ? col2.offsetWidth : 0;
+      this.totalColsWidth = col1Width + col2Width;
+
+      // Calculate threshold in px (11rem)
+      const rem = parseFloat(getComputedStyle(document.documentElement).fontSize);
+      const threshold = this.totalColsWidth + 2 * 3 * rem + 5 * rem;
+
+      // Set isNarrow based on window width
+      this.isNarrow = window.innerWidth < threshold;
+    }
+  }
 }
 </script>
 
 <style scoped>
-  ul.footer-list {
-    list-style: none;
-    padding-left: 0 !important;
-  }
+.footer-list {
+  list-style: none;
+  padding-left: 0;
+}
 
-  ul.footer-list a,
-  .white-footer-links a{
-    color: white !important;
-  }
-  .footer {
-    height: auto;
-  }
-  .v-footer, .container {
-    height: 100%;
-  }
+.footer-list-title {
+  font-weight: bold;
+  color: white;
+  margin-bottom: 0.5em;
+}
+
+.footer-list li {
+  margin-bottom: 0.3em;
+}
+
+.footer-list a, .footer-list :deep(a) {
+  color: white !important;
+  text-decoration: none;
+  transition: text-decoration 0.2s, color 0.2s;
+}
+
+.footer-list a:hover, .footer-list :deep(a:hover) {
+  text-decoration: underline;
+  color: white !important;
+}
+
+.v-footer {
+  background-color: #0063BF !important;
+  height: 100%;
+  padding: 0;
+}
+
+.row-margin {
+  margin: 3rem !important;
+}
+.small-row-margin {
+  margin: 1.5rem !important;
+}
+.col-margin {
+  margin-right: 5rem !important;
+}
+.small-col-margin {
+  margin-bottom: 2.5rem !important;
+}
 </style>

From b2f208ecb732bbba9483d3d5f476f96beaf17a7a Mon Sep 17 00:00:00 2001
From: Dat <dat.nguyen@wikimedia.de>
Date: Tue, 15 Jul 2025 11:31:57 +0200
Subject: [PATCH 2/7] fix linting error

---
 src/components/Layout/Foot.vue | 30 +++++++++++++++---------------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/components/Layout/Foot.vue b/src/components/Layout/Foot.vue
index be17c17e..f6b5fda8 100644
--- a/src/components/Layout/Foot.vue
+++ b/src/components/Layout/Foot.vue
@@ -32,34 +32,34 @@
 <script>
 export default {
   name: 'Foot',
-  data() {
+  data () {
     return {
       isNarrow: false,
       totalColsWidth: 0
     }
   },
-  mounted() {
-    this.updateWidths();
-    window.addEventListener('resize', this.updateWidths);
+  mounted () {
+    this.updateWidths()
+    window.addEventListener('resize', this.updateWidths)
   },
-  beforeDestroy() {
-    window.removeEventListener('resize', this.updateWidths);
+  beforeDestroy () {
+    window.removeEventListener('resize', this.updateWidths)
   },
   methods: {
-    updateWidths() {
+    updateWidths () {
       // Get widths of both columns
-      const col1 = this.$refs.col1?.$el || this.$refs.col1;
-      const col2 = this.$refs.col2?.$el || this.$refs.col2;
-      const col1Width = col1 ? col1.offsetWidth : 0;
-      const col2Width = col2 ? col2.offsetWidth : 0;
-      this.totalColsWidth = col1Width + col2Width;
+      const col1 = this.$refs.col1?.$el || this.$refs.col1
+      const col2 = this.$refs.col2?.$el || this.$refs.col2
+      const col1Width = col1 ? col1.offsetWidth : 0
+      const col2Width = col2 ? col2.offsetWidth : 0
+      this.totalColsWidth = col1Width + col2Width
 
       // Calculate threshold in px (11rem)
-      const rem = parseFloat(getComputedStyle(document.documentElement).fontSize);
-      const threshold = this.totalColsWidth + 2 * 3 * rem + 5 * rem;
+      const rem = parseFloat(getComputedStyle(document.documentElement).fontSize)
+      const threshold = this.totalColsWidth + 2 * 3 * rem + 5 * rem
 
       // Set isNarrow based on window width
-      this.isNarrow = window.innerWidth < threshold;
+      this.isNarrow = window.innerWidth < threshold
     }
   }
 }

From b18e193ee06d926da3fa868622a938f366b1490d Mon Sep 17 00:00:00 2001
From: Dat <dat.nguyen@wikimedia.de>
Date: Tue, 22 Jul 2025 01:42:03 +0200
Subject: [PATCH 3/7] Update Footer size and use px instead of rem

---
 src/components/Layout/Foot.vue | 67 +++++++++++++++++++---------------
 1 file changed, 38 insertions(+), 29 deletions(-)

diff --git a/src/components/Layout/Foot.vue b/src/components/Layout/Foot.vue
index f6b5fda8..79d85a2b 100644
--- a/src/components/Layout/Foot.vue
+++ b/src/components/Layout/Foot.vue
@@ -1,7 +1,14 @@
 <template>
   <v-footer data-test-id="footer" class="footer">
-    <v-row :class="['row-margin', { 'small-row-margin': isNarrow }]" no-gutters>
-      <v-col :class="['col-margin', { 'small-col-margin': isNarrow }]" ref="col1" cols="auto">
+    <v-row
+      :class="isNarrow ? 'small-row-margin stack-vertical' : 'row-margin'"
+      no-gutters
+    >
+      <v-col
+        :class="isNarrow ? 'small-col-margin' : 'col-margin'"
+        ref="col1"
+        cols="auto"
+      >
         <nav aria-label="Wikibase Cloud links">
           <h3 class="footer-list-title">Wikibase Cloud</h3>
           <ul class="footer-list">
@@ -31,35 +38,31 @@
 
 <script>
 export default {
-  name: 'Foot',
-  data () {
+  name: 'Footer',
+  data() {
     return {
       isNarrow: false,
-      totalColsWidth: 0
+      initialThreshold: 0
     }
   },
-  mounted () {
-    this.updateWidths()
-    window.addEventListener('resize', this.updateWidths)
-  },
-  beforeDestroy () {
-    window.removeEventListener('resize', this.updateWidths)
-  },
-  methods: {
-    updateWidths () {
-      // Get widths of both columns
+  mounted() {
+    this.$nextTick(() => {
       const col1 = this.$refs.col1?.$el || this.$refs.col1
       const col2 = this.$refs.col2?.$el || this.$refs.col2
       const col1Width = col1 ? col1.offsetWidth : 0
       const col2Width = col2 ? col2.offsetWidth : 0
-      this.totalColsWidth = col1Width + col2Width
-
-      // Calculate threshold in px (11rem)
-      const rem = parseFloat(getComputedStyle(document.documentElement).fontSize)
-      const threshold = this.totalColsWidth + 2 * 3 * rem + 5 * rem
-
-      // Set isNarrow based on window width
-      this.isNarrow = window.innerWidth < threshold
+      const threshold = col1Width + col2Width + 176
+      this.initialThreshold = threshold
+      this.updateIsNarrow()
+      window.addEventListener('resize', this.updateIsNarrow)
+    })
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.updateIsNarrow)
+  },
+  methods: {
+    updateIsNarrow() {
+      this.isNarrow = window.innerWidth <= this.initialThreshold
     }
   }
 }
@@ -74,11 +77,11 @@ export default {
 .footer-list-title {
   font-weight: bold;
   color: white;
-  margin-bottom: 0.5em;
+  margin-bottom: 8px;
 }
 
 .footer-list li {
-  margin-bottom: 0.3em;
+  margin-bottom: 5px;
 }
 
 .footer-list a, .footer-list :deep(a) {
@@ -99,15 +102,21 @@ export default {
 }
 
 .row-margin {
-  margin: 3rem !important;
+  margin: 48px !important;
 }
 .small-row-margin {
-  margin: 1.5rem !important;
+  margin: 24px !important;
 }
+
 .col-margin {
-  margin-right: 5rem !important;
+  margin-right: 80px !important;
 }
 .small-col-margin {
-  margin-bottom: 2.5rem !important;
+  margin-bottom: 40px !important;
+  margin-right: 0 !important;
+}
+
+.stack-vertical {
+  flex-direction: column !important;
 }
 </style>

From 705ed038d939ae7cd323a4f96cc24fed46a58680 Mon Sep 17 00:00:00 2001
From: Dat <dat.nguyen@wikimedia.de>
Date: Tue, 22 Jul 2025 01:44:36 +0200
Subject: [PATCH 4/7] fix linting error

---
 src/components/Layout/Foot.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/Layout/Foot.vue b/src/components/Layout/Foot.vue
index 79d85a2b..a5ae2243 100644
--- a/src/components/Layout/Foot.vue
+++ b/src/components/Layout/Foot.vue
@@ -39,13 +39,13 @@
 <script>
 export default {
   name: 'Footer',
-  data() {
+  data () {
     return {
       isNarrow: false,
       initialThreshold: 0
     }
   },
-  mounted() {
+  mounted () {
     this.$nextTick(() => {
       const col1 = this.$refs.col1?.$el || this.$refs.col1
       const col2 = this.$refs.col2?.$el || this.$refs.col2
@@ -57,11 +57,11 @@ export default {
       window.addEventListener('resize', this.updateIsNarrow)
     })
   },
-  beforeDestroy() {
+  beforeDestroy () {
     window.removeEventListener('resize', this.updateIsNarrow)
   },
   methods: {
-    updateIsNarrow() {
+    updateIsNarrow () {
       this.isNarrow = window.innerWidth <= this.initialThreshold
     }
   }

From 3bc4e50da278362a7b9fc2bd15de433b397ca597 Mon Sep 17 00:00:00 2001
From: Dat <dat.nguyen@wikimedia.de>
Date: Sun, 3 Aug 2025 23:28:23 +0200
Subject: [PATCH 5/7] Switch to static CSS breakpoint instead of JS

---
 src/components/Layout/Foot.vue | 58 ++++++++--------------------------
 1 file changed, 13 insertions(+), 45 deletions(-)

diff --git a/src/components/Layout/Foot.vue b/src/components/Layout/Foot.vue
index a5ae2243..a74ccfa6 100644
--- a/src/components/Layout/Foot.vue
+++ b/src/components/Layout/Foot.vue
@@ -1,14 +1,7 @@
 <template>
   <v-footer data-test-id="footer" class="footer">
-    <v-row
-      :class="isNarrow ? 'small-row-margin stack-vertical' : 'row-margin'"
-      no-gutters
-    >
-      <v-col
-        :class="isNarrow ? 'small-col-margin' : 'col-margin'"
-        ref="col1"
-        cols="auto"
-      >
+    <v-row class="row-margin" no-gutters>
+      <v-col class="col-margin" ref="col1" cols="auto">
         <nav aria-label="Wikibase Cloud links">
           <h3 class="footer-list-title">Wikibase Cloud</h3>
           <ul class="footer-list">
@@ -38,33 +31,7 @@
 
 <script>
 export default {
-  name: 'Footer',
-  data () {
-    return {
-      isNarrow: false,
-      initialThreshold: 0
-    }
-  },
-  mounted () {
-    this.$nextTick(() => {
-      const col1 = this.$refs.col1?.$el || this.$refs.col1
-      const col2 = this.$refs.col2?.$el || this.$refs.col2
-      const col1Width = col1 ? col1.offsetWidth : 0
-      const col2Width = col2 ? col2.offsetWidth : 0
-      const threshold = col1Width + col2Width + 176
-      this.initialThreshold = threshold
-      this.updateIsNarrow()
-      window.addEventListener('resize', this.updateIsNarrow)
-    })
-  },
-  beforeDestroy () {
-    window.removeEventListener('resize', this.updateIsNarrow)
-  },
-  methods: {
-    updateIsNarrow () {
-      this.isNarrow = window.innerWidth <= this.initialThreshold
-    }
-  }
+  name: 'Footer'
 }
 </script>
 
@@ -103,20 +70,21 @@ export default {
 
 .row-margin {
   margin: 48px !important;
-}
-.small-row-margin {
-  margin: 24px !important;
+  display: flex;
 }
 
 .col-margin {
   margin-right: 80px !important;
 }
-.small-col-margin {
-  margin-bottom: 40px !important;
-  margin-right: 0 !important;
-}
 
-.stack-vertical {
-  flex-direction: column !important;
+@media (max-width: 480px) {
+  .row-margin {
+    margin: 24px !important;
+    flex-direction: column !important;
+  }
+  .col-margin {
+    margin-right: 0 !important;
+    margin-bottom: 40px !important;
+  }
 }
 </style>

From 4f7b68a4e6cc9271869381647370c3f30c525bae Mon Sep 17 00:00:00 2001
From: Dat <dat.nguyen@wikimedia.de>
Date: Sun, 3 Aug 2025 23:51:56 +0200
Subject: [PATCH 6/7] add footer-padding of 56px

---
 src/App.vue | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index fb6c8cb8..1b0eee5e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -5,7 +5,7 @@
       <v-container v-else class="full-height-content">
         <router-view></router-view>
       </v-container>
-      <Foot></Foot>
+      <Foot :class="['padding-footer', { 'tall-footer': customLayout }]"></Foot>
       <Interval
         v-if="this.$store.getters.isLoggedIn && !this.$store.getters.currentUser.verified"
         :callback="checkVerified"
@@ -45,7 +45,13 @@ export default {
 /* https://brizzo.net/tips/hide-recaptcha-v3-badge/ */
 .grecaptcha-badge { opacity:0;}
 
-  .full-height-content {
-    height: 100%
-  }
+.full-height-content {
+  height: 100%
+}
+.padding-footer.footer {
+  margin-top: 56px;
+}
+.tall-footer.footer {
+  height: 100%;
+}
 </style>

From c1d33e15c0ea1b71039e626dafbd7623b81616e8 Mon Sep 17 00:00:00 2001
From: Dat <dat.nguyen@wikimedia.de>
Date: Mon, 4 Aug 2025 00:10:54 +0200
Subject: [PATCH 7/7] fix height bug

---
 src/components/Layout/Foot.vue | 9 ---------
 1 file changed, 9 deletions(-)

diff --git a/src/components/Layout/Foot.vue b/src/components/Layout/Foot.vue
index a74ccfa6..73691815 100644
--- a/src/components/Layout/Foot.vue
+++ b/src/components/Layout/Foot.vue
@@ -40,43 +40,34 @@ export default {
   list-style: none;
   padding-left: 0;
 }
-
 .footer-list-title {
   font-weight: bold;
   color: white;
   margin-bottom: 8px;
 }
-
 .footer-list li {
   margin-bottom: 5px;
 }
-
 .footer-list a, .footer-list :deep(a) {
   color: white !important;
   text-decoration: none;
   transition: text-decoration 0.2s, color 0.2s;
 }
-
 .footer-list a:hover, .footer-list :deep(a:hover) {
   text-decoration: underline;
   color: white !important;
 }
-
 .v-footer {
   background-color: #0063BF !important;
-  height: 100%;
   padding: 0;
 }
-
 .row-margin {
   margin: 48px !important;
   display: flex;
 }
-
 .col-margin {
   margin-right: 80px !important;
 }
-
 @media (max-width: 480px) {
   .row-margin {
     margin: 24px !important;