From 2a4bb27271e33a981bf8df38e441b160bd66a84f Mon Sep 17 00:00:00 2001
From: "Torsten Schulz (local)" <tsschulz@gmx.net>
Date: Mon, 27 Apr 2026 16:14:37 +0200
Subject: [PATCH] Update HeaderAdBanner component styles and structure

- Modified the ad element's style to ensure a consistent display size of 320x50 pixels, enhancing visual integration.
- Adjusted the header ad banner's CSS to maintain a fixed width and height, improving layout stability across different screen sizes.
- Updated media queries to ensure responsive behavior while maintaining the ad's dimensions, optimizing user experience on smaller devices.

These changes collectively enhance the presentation and responsiveness of the ad banner within the application.
---
 client/src/components/HeaderAdBanner.vue | 30 ++++++++++++++++--------
 1 file changed, 20 insertions(+), 10 deletions(-)

diff --git a/client/src/components/HeaderAdBanner.vue b/client/src/components/HeaderAdBanner.vue
index a3a6c09..5191053 100644
--- a/client/src/components/HeaderAdBanner.vue
+++ b/client/src/components/HeaderAdBanner.vue
@@ -3,11 +3,9 @@
     <ins
       ref="adElement"
       class="adsbygoogle"
-      style="display:block"
+      style="display:inline-block;width:320px;height:50px"
       :data-ad-client="adClient"
       :data-ad-slot="adSlot"
-      data-ad-format="auto"
-      data-full-width-responsive="true"
     ></ins>
   </div>
 </template>
@@ -53,11 +51,16 @@ onMounted(async () => {
 
 <style scoped>
 .header-ad-banner {
-  flex: 1;
-  min-width: 280px;
-  max-width: 728px;
+  flex: 0 0 auto;
+  width: 320px;
+  min-width: 320px;
+  max-width: 320px;
+  height: 50px;
   margin: 0 16px;
-  padding: 4px 0;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .header-ad-banner :deep(ins) {
@@ -66,9 +69,16 @@ onMounted(async () => {
 
 @media (max-width: 960px) {
   .header-ad-banner {
-    min-width: 220px;
-    max-width: 468px;
-    margin: 0 10px;
+    width: 300px;
+    min-width: 300px;
+    max-width: 300px;
+    height: 50px;
+    margin: 0 8px;
+  }
+
+  .header-ad-banner :deep(ins) {
+    width: 300px !important;
+    height: 50px !important;
   }
 }