fix: grids and lists in rte

components/JsonToHtml/jsontohtml.module.css

@@ -14,20 +14,20 @@
   gap: var(--Spacing-x1);
 }
 
-.ol:has(li:nth-last-child(n + 4)),
-.ul:has(li:nth-last-child(n + 4)) {
+.ol:has(li:nth-last-child(n + 5)),
+.ul:has(li:nth-last-child(n + 5)) {
   grid-template-columns: 1fr 1fr;
-  grid-auto-flow: column;
 }
 
 .ol > li::marker {
   color: var(--Primary-Light-On-Surface-Accent);
 }
 
-.ul:has(.heart),
-.ul:has(.check) {
+.li:has(.heart),
+.li:has(.check) {
   list-style: none;
 }
+
 .li:has(.heart),
 .li:has(.check) {
   display: flex;
@@ -54,7 +54,7 @@
 }
 
 .container {
-  display: "grid";
+  display: grid;
   gap: var(--Spacing-x3);
   max-width: 1197px;
 }

components/JsonToHtml/renderOptions.tsx

@@ -497,7 +497,10 @@ export const renderOptions: RenderOptions = {
         className={styles.ul}
         style={
           numberOfRows
-            ? { gridTemplateRows: `repeat(${numberOfRows}, auto)` }
+            ? {
+                gridTemplateRows: `repeat(${numberOfRows}, auto)`,
+                gridAutoFlow: "column",
+              }
             : {}
         }
       >

components/Loyalty/Sidebar/JoinLoyalty/index.tsx

@@ -1,6 +1,5 @@
-import { login } from "@/constants/routes/handleAuth"
+import { serverClient } from "@/lib/trpc/server"
 
-import { auth } from "@/auth"
 import ArrowRight from "@/components/Icons/ArrowRight"
 import { ScandicFriends } from "@/components/Levels"
 import Button from "@/components/TempDesignSystem/Button"
@@ -21,9 +20,10 @@ export default async function JoinLoyaltyContact({
   lang,
 }: JoinLoyaltyContactProps & LangParams) {
   const { formatMessage } = await getIntl()
-  const session = await auth()
+  const user = await serverClient().user.name()
 
-  if (session) {
+  // Check if we have user, that means we are logged in.
+  if (user) {
     return null
   }
   return (

components/Loyalty/Sidebar/MyPagesNavigation/index.tsx

@@ -1,12 +1,14 @@
-import { auth } from "@/auth"
+import { serverClient } from "@/lib/trpc/server"
+
 import MyPagesSidebar from "@/components/MyPages/Sidebar"
 
 import { LangParams } from "@/types/params"
 
 export default async function MyPagesNavigation({ lang }: LangParams) {
-  const session = await auth()
+  const user = await serverClient().user.name()
 
-  if (!session) {
+  // Check if we have user, that means we are logged in.
+  if (!user) {
     return null
   }