From edb4d69c09a638ebe67cced847ecb30cd4f67492 Mon Sep 17 00:00:00 2001
From: mynameismx <kirill.petrov.ynt@gmail.com>
Date: Tue, 26 Aug 2025 15:40:02 +0900
Subject: [PATCH] Fix Notifications CSS on mobile

* Fix Notifications CSS on mobile

* Update Page.styles.ts

* Update Navigation.styles.ts

* Update Notification.styles.ts

* Update Notification.styles.ts
---
 web/js/reactive/containers/page/Navigation.styles.ts      | 2 ++
 web/js/reactive/containers/page/Page.styles.ts            | 8 ++++++++
 .../reactive/pages/notifications/Notification.styles.ts   | 4 ++++
 3 files changed, 14 insertions(+)

diff --git a/web/js/reactive/containers/page/Navigation.styles.ts b/web/js/reactive/containers/page/Navigation.styles.ts
index b704ea7b..f1558bb3 100644
--- a/web/js/reactive/containers/page/Navigation.styles.ts
+++ b/web/js/reactive/containers/page/Navigation.styles.ts
@@ -10,6 +10,8 @@ export const Container = styled.div`
 
   @media (max-width: ${MOBILE_SIZE}px) {
     display: flex;
+    border-right: none;
+    border-bottom: 1px solid ${({ theme }) => theme.windowStrong};
 
     & > * {
       flex: 1 1 0;
diff --git a/web/js/reactive/containers/page/Page.styles.ts b/web/js/reactive/containers/page/Page.styles.ts
index 3ef70ab8..302b8f0b 100644
--- a/web/js/reactive/containers/page/Page.styles.ts
+++ b/web/js/reactive/containers/page/Page.styles.ts
@@ -67,10 +67,18 @@ export const FixedWidthContainer = styled.div<{ hasBorder?: boolean }>`
       &:after {
         right: 0;
       }
+
+      @media (max-width: ${MOBILE_SIZE}px) {
+        &:before,
+        &:after {
+          display: none;
+        }
+      }
     `};
 
   @media (max-width: ${MOBILE_SIZE}px) {
     flex-direction: column;
+    padding: 0;
   }
 `
 
diff --git a/web/js/reactive/pages/notifications/Notification.styles.ts b/web/js/reactive/pages/notifications/Notification.styles.ts
index b46e2546..98bfd5a8 100644
--- a/web/js/reactive/pages/notifications/Notification.styles.ts
+++ b/web/js/reactive/pages/notifications/Notification.styles.ts
@@ -51,10 +51,14 @@ export const RevisionFields = styled.div`
   border-radius: 4px;
   display: grid;
   grid-template-columns: 1fr max-content max-content max-content;
+  @media (max-width: ${MOBILE_SIZE}px) {
+    grid-template-columns: 1fr max-content max-content 1fr;
+  }
 `
 
 const RevisionField = styled.div`
   padding: 8px;
+  word-break: break-all;
 `
 
 export const RevisionArticle = styled(RevisionField)``