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

@@ -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;
+  flex: 0 0 auto;
-  min-width: 280px;
+  width: 320px;
-  max-width: 728px;
+  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;
+    width: 300px;
-    max-width: 468px;
+    min-width: 300px;
-    margin: 0 10px;
+    max-width: 300px;
+    height: 50px;
+    margin: 0 8px;
+  }
+
+  .header-ad-banner :deep(ins) {
+    width: 300px !important;
+    height: 50px !important;
   }
 }