From e8e50b70df893b24ed93cbaa1dc459bd292dce13 Mon Sep 17 00:00:00 2001
From: Shoaib Akhtar Ansari <shoaib.ansari5398@gmail.com>
Date: Tue, 20 Jan 2026 20:06:58 +0530
Subject: [PATCH] fix: resolve search bar overlap with title on tablet
 viewports (#27050) (#27055)

* fix: resolve search bar overlap with title on tablet viewports (#27050)

* Update ShellMainAppDir.tsx

---------

Co-authored-by: Anik Dhabal Babu <81948346+anikdhabal@users.noreply.github.com>
---
 .../app/(use-page-wrapper)/(main-nav)/ShellMainAppDir.tsx  | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/apps/web/app/(use-page-wrapper)/(main-nav)/ShellMainAppDir.tsx b/apps/web/app/(use-page-wrapper)/(main-nav)/ShellMainAppDir.tsx
index 8c09fb5bb5..f625cdfb24 100644
--- a/apps/web/app/(use-page-wrapper)/(main-nav)/ShellMainAppDir.tsx
+++ b/apps/web/app/(use-page-wrapper)/(main-nav)/ShellMainAppDir.tsx
@@ -17,11 +17,14 @@ export function ShellMainAppDir(props: LayoutProps) {
           {!!props.backPath && <ShellMainAppDirBackButton backPath={props.backPath} />}
           {props.heading && (
             <header
-              className={classNames(props.large && "py-8", "flex w-full max-w-full items-center truncate")}>
+              className={classNames(
+                props.large && "py-8",
+                "flex w-full max-w-full items-center flex-wrap md:flex-nowrap gap-2 md:gap-0"
+              )}>
               {props.HeadingLeftIcon && <div className="ltr:mr-4">{props.HeadingLeftIcon}</div>}
               <div
                 className={classNames(
-                  "hidden w-full truncate ltr:mr-4 rtl:ml-4 md:block",
+                  "hidden min-w-0 flex-1 ltr:mr-4 rtl:ml-4 md:block",
                   props.headerClassName
                 )}>
                 {props.heading && (