From 2eec4ebafd7c5a48e064ab18d86ff7e4e0d32613 Mon Sep 17 00:00:00 2001
From: Sergey Konovalov <Sergey.Konovalov@onlyoffice.com>
Date: Wed, 12 Nov 2025 18:55:25 +0300
Subject: [PATCH] [feature] Add close button to mobile menu; remove input
 max-width in mobile

---
 .../src/components/Input/Input.module.scss    |  6 ++
 AdminPanel/client/src/components/Menu/Menu.js |  7 ++-
 .../src/components/Menu/Menu.module.scss      | 59 ++++++++++++++++++-
 .../components/MobileHeader/MobileHeader.js   |  2 +-
 .../src/pages/WOPISettings/WOPISettings.js    |  2 -
 .../WOPISettings/WOPISettings.module.scss     | 10 ++--
 6 files changed, 72 insertions(+), 14 deletions(-)

diff --git a/AdminPanel/client/src/components/Input/Input.module.scss b/AdminPanel/client/src/components/Input/Input.module.scss
index 00fb6488..5182b206 100644
--- a/AdminPanel/client/src/components/Input/Input.module.scss
+++ b/AdminPanel/client/src/components/Input/Input.module.scss
@@ -63,3 +63,9 @@
   color: #dc3545;
   margin-top: 4px;
 }
+
+@media (max-width: 767px) {
+  .input {
+    max-width: 100%;
+  }
+}
diff --git a/AdminPanel/client/src/components/Menu/Menu.js b/AdminPanel/client/src/components/Menu/Menu.js
index 7bec8add..b51e1f5e 100644
--- a/AdminPanel/client/src/components/Menu/Menu.js
+++ b/AdminPanel/client/src/components/Menu/Menu.js
@@ -38,15 +38,16 @@ function Menu({isOpen, onClose}) {
 
   return (
     <div className={`${styles.menu} ${isOpen ? styles['menu--open'] : ''}`}>
-      <div className={styles['menu__content']}>
+      <button className={styles['menu__closeButton']} onClick={onClose} aria-label='Close menu' />
+      <div className={styles['menu__header']}>
         <div className={styles['menu__logoContainer']}>
           <img src={AppMenuLogo} alt='ONLYOFFICE' className={styles['menu__logo']} />
         </div>
-
         <div className={styles['menu__title']}>DocServer Admin Panel</div>
-
         <div className={styles['menu__separator']}></div>
+      </div>
 
+      <div className={styles['menu__content']}>
         <div className={styles['menu__menuItems']}>
           {menuItems.map(item => (
             <MenuItem
diff --git a/AdminPanel/client/src/components/Menu/Menu.module.scss b/AdminPanel/client/src/components/Menu/Menu.module.scss
index 9807c139..a16afb78 100644
--- a/AdminPanel/client/src/components/Menu/Menu.module.scss
+++ b/AdminPanel/client/src/components/Menu/Menu.module.scss
@@ -1,4 +1,5 @@
 .menu {
+  position: relative;
   width: 256px;
   height: 100vh;
   background: #f9f9f9;
@@ -24,19 +25,29 @@
       box-shadow:
         0 0 0 1px rgba(0, 0, 0, 0.04),
         0 8px 24px rgba(0, 0, 0, 0.12);
-      .menu__content {
+      .menu__header {
         padding-left: 16px;
         padding-top: 16px;
       }
+      .menu__content {
+        padding-left: 16px;
+      }
     }
   }
 
+  &__header {
+    flex-shrink: 0;
+    padding-left: 32px;
+    padding-top: 32px;
+    padding-right: 16px;
+    background: #f9f9f9;
+  }
+
   &__content {
     display: flex;
     flex-direction: column;
-    height: 100%;
+    flex: 1;
     padding-left: 32px;
-    padding-top: 32px;
     overflow-y: auto;
     overflow-x: hidden;
 
@@ -113,4 +124,46 @@
       color: #666666;
     }
   }
+
+  &__closeButton {
+    display: none;
+
+    @media (max-width: 767px) {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      position: absolute;
+      top: 16px;
+      right: 16px;
+      width: 32px;
+      height: 32px;
+      background: transparent;
+      border: none;
+      cursor: pointer;
+      padding: 0;
+      z-index: 10;
+
+      &::before,
+      &::after {
+        content: '';
+        position: absolute;
+        width: 20px;
+        height: 2px;
+        background: #333333;
+      }
+
+      &::before {
+        transform: rotate(45deg);
+      }
+
+      &::after {
+        transform: rotate(-45deg);
+      }
+
+      &:hover::before,
+      &:hover::after {
+        background: #666666;
+      }
+    }
+  }
 }
diff --git a/AdminPanel/client/src/components/MobileHeader/MobileHeader.js b/AdminPanel/client/src/components/MobileHeader/MobileHeader.js
index ce23048d..951026a5 100644
--- a/AdminPanel/client/src/components/MobileHeader/MobileHeader.js
+++ b/AdminPanel/client/src/components/MobileHeader/MobileHeader.js
@@ -3,7 +3,7 @@ import styles from './MobileHeader.module.scss';
 function MobileHeader({onMenuToggle, isOpen}) {
   return (
     <div className={`${styles.mobileHeader} ${isOpen ? styles['mobileHeader--open'] : ''}`}>
-      <button className={styles.burger} onClick={onMenuToggle} aria-label='Open menu'>
+      <button className={styles.burger} onClick={onMenuToggle} aria-label='Menu' aria-expanded={isOpen}>
         <span></span>
         <span></span>
         <span></span>
diff --git a/AdminPanel/client/src/pages/WOPISettings/WOPISettings.js b/AdminPanel/client/src/pages/WOPISettings/WOPISettings.js
index d10e2b97..c9ed5067 100644
--- a/AdminPanel/client/src/pages/WOPISettings/WOPISettings.js
+++ b/AdminPanel/client/src/pages/WOPISettings/WOPISettings.js
@@ -137,7 +137,6 @@ function WOPISettings() {
                 value={localRefreshLockInterval}
                 onChange={handleRefreshLockIntervalChange}
                 placeholder='10m'
-                width='200px'
                 description="Time interval for refreshing document locks (e.g., '10m', '1h', '30s')"
               />
             </div>
@@ -156,7 +155,6 @@ function WOPISettings() {
                 value={maskKey(wopiPublicKey)}
                 disabled
                 placeholder='No key generated'
-                width='400px'
                 style={{fontFamily: 'Courier New, monospace'}}
               />
             </div>
diff --git a/AdminPanel/client/src/pages/WOPISettings/WOPISettings.module.scss b/AdminPanel/client/src/pages/WOPISettings/WOPISettings.module.scss
index 8a5634d2..3b7e49b3 100644
--- a/AdminPanel/client/src/pages/WOPISettings/WOPISettings.module.scss
+++ b/AdminPanel/client/src/pages/WOPISettings/WOPISettings.module.scss
@@ -42,11 +42,11 @@
 }
 
 .formRow {
-  margin-bottom: 16px;
-  display: flex;
-  align-items: flex-end;
-  gap: 16px;
-  flex-wrap: wrap;
+  margin-bottom: 24px;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
 }
 
 // Ensure SaveButton aligns properly in form row