Make ResultListFrame more readable

Author: buberdds

src/app/pages/SearchResultsPage/ResultListFrame.tsx

@@ -13,13 +13,7 @@ export const ResultListFrame: FC<{ children: React.ReactNode; networkForTheme: s
   const expectedTheme = scope?.network ?? fallbackTheme
 
   return isMobile ? (
-    <div
-      className={cn(
-        expectedTheme !== networkForTheme &&
-          '[&_>_div_>_[data-slot="card"]]:rounded-none [&_>_div_>_[data-slot="card"]]:border-solid [&_>_div_>_[data-slot="card"]]:border-theme-layout-accent [&_>_div_>_[data-slot="card"]]:border-y-[10px] [&_>_div_>_[data-slot="card"]]:border-x',
-        networkForTheme,
-      )}
-    >
+    <div className={cn(expectedTheme !== networkForTheme && 'mobile-card-border-override', networkForTheme)}>
       {children}
     </div>
   ) : (

src/styles/tailwind.css

@@ -36,6 +36,10 @@
   --color-theme-contrast-main: #000062;
 }
 
+.mobile-card-border-override > div > [data-slot='card'] {
+  @apply rounded-none border-solid border-theme-layout-accent border-y-[10px] border-x;
+}
+
 /* Specific fixes needed during migration to Oasis UI Library */
 
 /* Override MUI styles that are applied globally */