Make copy-token window responsive and closable

Author: jelveh

src/gui/src/UI/Dashboard/TabAccount.js

@@ -173,6 +173,7 @@ const TabAccount = {
         });
         $el_window.find('.dashboard-section-account .copy-auth-token').on('click', function (e) {
             UIWindowCopyToken({
+                show_close_button: true,
                 show_header: true,
                 window_options: {
                     parent_uuid: $el_window.attr('data-element_uuid'),

src/gui/src/UI/UIWindowCopyToken.js

@@ -55,6 +55,9 @@ function UIWindowCopyToken (options = {}) {
         if ( ! options.show_header ) {
             h += `<div class="form-label" style="margin-bottom: 5px; font-size: 13px; color: #666;">${i18n('copy_token_message')}</div>`;
         }
+        if ( options.show_close_button ) {
+            h += '<div class="qr-code-window-close-btn generic-close-window-button"> &times; </div>';
+        }
         h += `<div style="display: flex; gap: 8px; margin-top: ${options.show_header ? '0' : '15'}px; margin-bottom: 15px;">`;
         h += `<input type="text" class="token-input" readonly value="${html_encode(window.auth_token)}" style="flex: 1; font-family: monospace; font-size: 13px;" />`;
         h += `<button class="button button-primary copy-token-btn">${i18n('copy')}</button>`;
@@ -85,7 +88,7 @@ function UIWindowCopyToken (options = {}) {
             height: 'auto',
             dominant: true,
             show_in_taskbar: false,
-            window_class: 'window-publishWebsite',
+            window_class: 'window-copy-auth-token',
             body_css: {
                 width: 'initial',
                 height: '100%',

src/gui/src/css/style.css

@@ -3036,6 +3036,22 @@ label {
 }
 
 @media screen and (max-width: 768px) {
+    .window-copy-auth-token {
+        width: 100% !important;
+        max-width: none !important;
+        max-height: 100vh !important;
+        height: 100vh !important;
+        top:0 !important;
+        left: 0 !important;
+        border-radius: 0 !important;
+    }
+
+    .window-copy-auth-token .window-body {
+        box-sizing: border-box !important;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+    }
 
     .taskbar {
         justify-content: center;
@@ -4490,6 +4506,17 @@ fieldset[name=number-code] {
 }
 
 @media (max-width:480px) {
+    .window-copy-auth-token {
+        width: 100% !important;
+        max-width: none !important;
+        height: 100% !important;
+        top:0 !important;
+        left: 0 !important;
+        border-radius: 0 !important;
+    }
+    .window-copy-auth-token .window-body {
+        box-sizing: border-box !important;
+    }
     .puter-auth-dialog-content {
         padding: 50px 20px;
     }