[Shields]: Fix host display bidi reordering for trailing special characters (#35956)

* Fix: Replace ‎ with FSI/PDI Unicode bidi isolation in Shields panel host display

Fixes brave/brave-browser#54975

The ‎ fix in PR #35446 only sets initial LTR direction but does
not isolate the host string from Unicode bidi processing. Trailing
special characters (underscore, dash, dot) and combinations still
reorder on Nightly v1.91.111.

Changes:
- Replace ‎ with FSI (U+2068) / PDI (U+2069) in 4 TSX files
- Add unicode-bidi: isolate to overflow-ellipsis-start in app.style.ts
- Add unicode-bidi: isolate + direction: ltr to SiteTitle in
  main-panel/style.ts and tree-list/style.ts

* chore: format shields panel files with prettier

* chore: fix hook dependency warning in tree-list

components/brave_shields/resources/panel/components/main-panel/index.tsx

@@ -195,7 +195,7 @@ function MainPanel () {
         <S.FavIconBox>
           <img key={siteBlockInfo?.faviconUrl.url} src={siteBlockInfo?.faviconUrl.url} />
         </S.FavIconBox>
-        <S.SiteTitle>&lrm;{siteBlockInfo?.host}</S.SiteTitle>
+        <S.SiteTitle>{'\u2068'}{siteBlockInfo?.host}{'\u2069'}</S.SiteTitle>
       </S.SiteTitleBox>
       <S.CountBox>
         <S.BlockNote>

components/brave_shields/resources/panel/components/main-panel/style.ts

@@ -60,7 +60,7 @@ export const SiteTitle = styled.h1`
   margin: 0;
   overflow: hidden;
   text-align: left;
-  // We truncate long site titles to the left
+  unicode-bidi: isolate;
   direction: rtl;
   text-overflow: ellipsis;
   white-space: nowrap;

components/brave_shields/resources/panel/components/tree-list/index.tsx

@@ -102,7 +102,7 @@ function SidePanel (props: {
           <S.FavIconBox>
             <img src={siteBlockInfo?.faviconUrl.url} />
           </S.FavIconBox>
-          <S.SiteTitle>&lrm;{siteBlockInfo?.host}</S.SiteTitle>
+          <S.SiteTitle>{'\u2068'}{siteBlockInfo?.host}{'\u2069'}</S.SiteTitle>
         </S.SiteTitleBox>
       </S.HeaderBox>
       <S.Scroller>
@@ -123,7 +123,7 @@ function SidePanel (props: {
 }
 
 function TreeList (props: Props) {
-  const allowedList = props.allowedList ?? [];
+  const allowedList = React.useMemo(() => props.allowedList ?? [], [props.allowedList])
   const allowedScriptsByOrigin = React.useMemo(() =>
     groupByOrigin(allowedList), [allowedList])
 

components/brave_shields/resources/panel/components/tree-list/style.ts

@@ -98,6 +98,7 @@ export const SiteTitle = styled.span`
   font-size: 14px;
   font-weight: 500;
   overflow: hidden;
+  unicode-bidi: isolate;
   direction: rtl;
   text-overflow: ellipsis;
   white-space: nowrap;

components/brave_shields/resources/panel_new/components/app.style.ts

@@ -106,6 +106,7 @@ style.passthrough.css`
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
+    unicode-bidi: isolate;
 
     &:dir(ltr) {
       direction: rtl;

components/brave_shields/resources/panel_new/components/details_header.tsx

@@ -37,7 +37,11 @@ export function DetailsHeader(props: Props) {
         </Button>
         <div className='text'>
           <h4>{props.title}</h4>
-          <div className='host overflow-ellipsis-start'>&lrm;{host}</div>
+          <div className='host overflow-ellipsis-start'>
+            {'\u2068'}
+            {host}
+            {'\u2069'}
+          </div>
           {props.children}
         </div>
       </div>

components/brave_shields/resources/panel_new/components/main_card.tsx

@@ -66,7 +66,9 @@ export function MainCard() {
             className='overflow-ellipsis-start'
             title={siteHost}
           >
-            ‎{siteHost}
+            {'\u2068'}
+            {siteHost}
+            {'\u2069'}
           </h3>
           <div className='shields-status'>
             {formatString(