fix(branding): add viewport template injection and mobile CSS rules

- Add a task to check and inject the viewport meta tag inside Koji's Cheetah header template.
- Add CSS media queries to reorganize the header and navigation bar elements vertically on narrow screens.
- Implement inline horizontal scroll on table tags to prevent viewports from expanding beyond mobile screen widths.

Co-developed-by: Gemini AI <renich+gemini@woralelandia.com>
Signed-off-by: Rénich Bon Ćirić <renich@woralelandia.com>

roles/koji_hub/tasks/main.yaml

@@ -423,6 +423,20 @@
 
 - name: "Deploy: Koji Web MxOS Branding Theme"
   block:
+    - name: Check if viewport is present in Koji Web header template
+      ansible.builtin.command: grep -q "viewport" /usr/share/koji-web/scripts/includes/header.chtml
+      register: koji_viewport_check
+      failed_when: false
+      changed_when: false
+
+    - name: Inject viewport meta tag in Koji Web header template
+      ansible.builtin.replace:
+        path: /usr/share/koji-web/scripts/includes/header.chtml
+        regexp: '(<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>)'
+        replace: '\1\n    <meta name="viewport" content="width=device-width, initial-scale=1"/>'
+      when: koji_viewport_check.rc != 0
+      notify: Restart httpd
+
     - name: Create MxOS theme directories on Hub
       ansible.builtin.file:
         path: "{{ item }}"
@@ -590,4 +604,70 @@
           .button:hover, input[type="submit"]:hover, input[type="button"]:hover {
               background-color: #059669;
           }
+
+          /* Tablas Responsivas */
+          table {
+              display: block;
+              width: 100%;
+              overflow-x: auto;
+              -webkit-overflow-scrolling: touch;
+          }
+
+          /* --- ESTILOS RESPONSIVOS PARA MÓVILES (Media Queries) --- */
+          @media (max-width: 768px) {
+              #header {
+                  height: auto;
+                  min-height: 110px;
+                  padding: 10px;
+                  text-align: center;
+              }
+
+              #kojiLogo {
+                  float: none;
+                  display: block;
+                  margin: 0 auto 10px auto;
+                  height: 40px;
+              }
+
+              #headerSearch {
+                  float: none;
+                  margin: 10px auto 0 auto;
+                  justify-content: center;
+                  height: auto;
+                  flex-wrap: wrap;
+                  gap: 6px;
+              }
+
+              #mainNav {
+                  height: auto;
+              }
+
+              #mainNav ul {
+                  display: flex;
+                  flex-wrap: wrap;
+                  padding: 0;
+                  margin: 0;
+                  list-style-type: none;
+              }
+
+              #mainNav ul li {
+                  float: none;
+                  flex: 1 1 30%; /* Ocupa al menos el 30% del ancho, fluyendo en filas */
+                  text-align: center;
+                  border-width: 1px;
+              }
+
+              #mainNav ul li a {
+                  padding: 8px 5px;
+                  font-size: 12px;
+                  height: auto;
+              }
+
+              #loginInfo {
+                  float: none;
+                  display: block;
+                  text-align: center;
+                  margin: 10px 0;
+              }
+          }
       notify: Restart httpd