From 1b11609c5091552389fec7fdfd75bdfc77410253 Mon Sep 17 00:00:00 2001
From: gnezim <gnezim@gmail.com>
Date: Wed, 15 Apr 2026 19:25:09 +0300
Subject: [PATCH] Fix search button styling, page title width, and sticky
 content rendering

Add blue background/hover styles to the search button matching Angular's
.color.blue button pattern. Fix page title width to calc(100% - 120px)
matching Angular layout. Conditionally render sticky-content wrapper
to avoid empty DOM nodes.
---
 .../online-board/components/OnlineBoardFilter.scss    | 11 +++++++++++
 src/ui/layout/PageLayout.scss                         |  4 ++++
 src/ui/layout/PageLayout.tsx                          |  8 +++++---
 3 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/src/features/online-board/components/OnlineBoardFilter.scss b/src/features/online-board/components/OnlineBoardFilter.scss
index 27d2c35a..68eaace5 100644
--- a/src/features/online-board/components/OnlineBoardFilter.scss
+++ b/src/features/online-board/components/OnlineBoardFilter.scss
@@ -150,10 +150,21 @@
     margin-top: vars.$space-xl;
     width: 100%;
     height: vars.$standard-button-height;
+    background-color: colors.$blue;
+    color: colors.$white;
+    border: none;
+    border-radius: vars.$border-radius;
+    cursor: pointer;
+    transition-duration: 0.2s;
+
+    &:hover {
+      background-color: colors.$blue--hover;
+    }
 
     span {
       font-weight: fonts.$font-bold;
       font-size: fonts.$font-size-m;
+      color: colors.$white;
     }
   }
 
diff --git a/src/ui/layout/PageLayout.scss b/src/ui/layout/PageLayout.scss
index c44833cb..ed18b4d6 100644
--- a/src/ui/layout/PageLayout.scss
+++ b/src/ui/layout/PageLayout.scss
@@ -87,6 +87,10 @@
   }
 
   &__title {
+    width: calc(100% - 120px);
+  }
+
+  &__title--fullwidth {
     width: 100%;
   }
 
diff --git a/src/ui/layout/PageLayout.tsx b/src/ui/layout/PageLayout.tsx
index 3bb2aded..e0f6369b 100644
--- a/src/ui/layout/PageLayout.tsx
+++ b/src/ui/layout/PageLayout.tsx
@@ -45,9 +45,11 @@ export const PageLayout: FC<PageLayoutProps> = ({
           {contentLeft}
         </aside>
         <main className="page-layout__column-right">
-          <div className="page-layout__sticky-content">
-            {stickyContent}
-          </div>
+          {stickyContent && (
+            <div className="page-layout__sticky-content">
+              {stickyContent}
+            </div>
+          )}
           {children}
         </main>
       </div>