From e386767d7952dba290ab7fe8f02aa2587d1bdbd9 Mon Sep 17 00:00:00 2001
From: MHSanaei <ho3ein.sanaei@gmail.com>
Date: Mon, 25 May 2026 04:04:46 +0200
Subject: [PATCH] refactor(frontend): drop !important overrides from pages CSS
 (Clients + Log modals + Settings tabs)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- ClientsPage: pagination size-changer `min-width !important` removed;
  the 3-level selector specificity already beats AntD's defaults.
  Scope `body.dark .client-card` to `.clients-page.is-dark .client-card`
  (avoid leaking into other pages).
- LogModal + XrayLogModal: move the mobile full-screen tweaks
  (`top: 0`, `padding-bottom: 0`, `max-width: 100vw`) from `!important`
  class rules to the Modal's `style` prop; keep `.ant-modal-content`
  / `.ant-modal-body` overrides as plain CSS via the className.
- SubscriptionFormatsTab: drop `display: block !important` on
  `.nested-block` — div is already block by default.
- TwoFactorModal: drop `padding/background/border-radius !important`
  on `.qr-code`; AntD QRCode handles those itself.
---
 frontend/src/pages/clients/ClientsPage.css             | 6 +++---
 frontend/src/pages/index/LogModal.css                  | 6 ------
 frontend/src/pages/index/LogModal.tsx                  | 1 +
 frontend/src/pages/index/XrayLogModal.css              | 6 ------
 frontend/src/pages/index/XrayLogModal.tsx              | 1 +
 frontend/src/pages/settings/SubscriptionFormatsTab.css | 1 -
 frontend/src/pages/settings/TwoFactorModal.css         | 3 ---
 7 files changed, 5 insertions(+), 19 deletions(-)

diff --git a/frontend/src/pages/clients/ClientsPage.css b/frontend/src/pages/clients/ClientsPage.css
index ab1ce76c..cfc6c68e 100644
--- a/frontend/src/pages/clients/ClientsPage.css
+++ b/frontend/src/pages/clients/ClientsPage.css
@@ -36,7 +36,7 @@
 
 .clients-page .ant-pagination-options-size-changer,
 .clients-page .ant-pagination-options-size-changer .ant-select-selector {
-  min-width: 100px !important;
+  min-width: 100px;
 }
 
 .clients-page .loading-spacer {
@@ -154,7 +154,7 @@
 
 .card-pagination .ant-pagination-options-size-changer,
 .card-pagination .ant-pagination-options-size-changer .ant-select-selector {
-  min-width: 88px !important;
+  min-width: 88px;
 }
 
 .bulk-count {
@@ -177,7 +177,7 @@
   background: rgba(22, 119, 255, 0.06);
 }
 
-body.dark .client-card {
+.clients-page.is-dark .client-card {
   background: rgba(255, 255, 255, 0.03);
   border-color: rgba(255, 255, 255, 0.1);
 }
diff --git a/frontend/src/pages/index/LogModal.css b/frontend/src/pages/index/LogModal.css
index 1fc31322..09b67842 100644
--- a/frontend/src/pages/index/LogModal.css
+++ b/frontend/src/pages/index/LogModal.css
@@ -165,12 +165,6 @@ html[data-theme="ultra-dark"] .log-container {
   --log-divider: rgba(255, 255, 255, 0.12);
 }
 
-.logmodal-mobile {
-  top: 0 !important;
-  padding-bottom: 0 !important;
-  max-width: 100vw !important;
-}
-
 .logmodal-mobile .ant-modal-content {
   border-radius: 0;
   height: 100vh;
diff --git a/frontend/src/pages/index/LogModal.tsx b/frontend/src/pages/index/LogModal.tsx
index ef31ad34..1f074017 100644
--- a/frontend/src/pages/index/LogModal.tsx
+++ b/frontend/src/pages/index/LogModal.tsx
@@ -109,6 +109,7 @@ export default function LogModal({ open, onClose }: LogModalProps) {
       open={open}
       footer={null}
       width={isMobile ? '100vw' : 800}
+      style={isMobile ? { top: 0, paddingBottom: 0, maxWidth: '100vw' } : undefined}
       className={isMobile ? 'logmodal-mobile' : undefined}
       onCancel={onClose}
       title={titleNode}
diff --git a/frontend/src/pages/index/XrayLogModal.css b/frontend/src/pages/index/XrayLogModal.css
index 074d679e..3a63f4a5 100644
--- a/frontend/src/pages/index/XrayLogModal.css
+++ b/frontend/src/pages/index/XrayLogModal.css
@@ -125,12 +125,6 @@ html[data-theme="ultra-dark"] .log-container {
   --log-divider: rgba(255, 255, 255, 0.12);
 }
 
-.xraylog-modal-mobile {
-  top: 0 !important;
-  padding-bottom: 0 !important;
-  max-width: 100vw !important;
-}
-
 .xraylog-modal-mobile .ant-modal-content {
   border-radius: 0;
   height: 100vh;
diff --git a/frontend/src/pages/index/XrayLogModal.tsx b/frontend/src/pages/index/XrayLogModal.tsx
index 5e5aa5e7..dadde51e 100644
--- a/frontend/src/pages/index/XrayLogModal.tsx
+++ b/frontend/src/pages/index/XrayLogModal.tsx
@@ -112,6 +112,7 @@ export default function XrayLogModal({ open, onClose }: XrayLogModalProps) {
       open={open}
       footer={null}
       width={isMobile ? '100vw' : '80vw'}
+      style={isMobile ? { top: 0, paddingBottom: 0, maxWidth: '100vw' } : undefined}
       className={isMobile ? 'xraylog-modal-mobile' : undefined}
       onCancel={onClose}
       title={
diff --git a/frontend/src/pages/settings/SubscriptionFormatsTab.css b/frontend/src/pages/settings/SubscriptionFormatsTab.css
index 318f341f..730aeb68 100644
--- a/frontend/src/pages/settings/SubscriptionFormatsTab.css
+++ b/frontend/src/pages/settings/SubscriptionFormatsTab.css
@@ -1,4 +1,3 @@
 .nested-block {
   padding: 10px 20px;
-  display: block !important;
 }
diff --git a/frontend/src/pages/settings/TwoFactorModal.css b/frontend/src/pages/settings/TwoFactorModal.css
index e72f272f..23a401d9 100644
--- a/frontend/src/pages/settings/TwoFactorModal.css
+++ b/frontend/src/pages/settings/TwoFactorModal.css
@@ -7,9 +7,6 @@
 
 .qr-code {
   cursor: pointer;
-  padding: 0 !important;
-  background: #fff;
-  border-radius: 6px;
 }
 
 .qr-token {