Make ResultListFrame more readable

Author: buberdds

src/app/pages/SearchResultsPage/ResultListFrame.tsx

@@ -12,20 +12,11 @@ export const ResultListFrame: FC<{ children: React.ReactNode; networkForTheme: s
   const fallbackTheme = 'mainnet'
   const expectedTheme = scope?.network ?? fallbackTheme
 
-  return isMobile ? (
+  return (
     <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,
-      )}
-    >
-      {children}
-    </div>
-  ) : (
-    <div
-      className={cn(
-        'mb-5 border-[15px] border-solid border-theme-layout-accent bg-white rounded-md',
+        !isMobile && 'mb-5 border-[15px] border-solid border-theme-layout-accent bg-white rounded-md',
+        isMobile && expectedTheme !== networkForTheme && 'mobile-card-border-override',
         networkForTheme,
       )}
     >

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 */