style: 🎨 Use Logical Style properties to apply same styles based on Language Direction (dir)

src/components/layout/MenuLayout.module.css

@@ -7,7 +7,7 @@
 .menu {
   width: 240px;
   padding-top: 34px;
-  padding-right: 20px;
+  padding-inline-end: 20px;
 }
 
 .content {

src/components/layout/NavGroup.module.css

@@ -29,12 +29,12 @@
   display: flex;
   flex-direction: row;
   align-items: center;
-  border-right: 2px solid var(--base200);
+  border-inline-end: 2px solid var(--base200);
   padding: 1rem 2rem;
   gap: var(--size500);
   font-weight: 600;
   width: 200px;
-  margin-right: -2px;
+  margin-inline-end: -2px;
 }
 
 a.item {
@@ -43,7 +43,7 @@ a.item {
 
 .item.selected {
   color: var(--base900);
-  border-right-color: var(--primary400);
+  border-inline-end-color: var(--primary400);
   background: var(--blue100);
 }
 

src/components/layout/PageHeader.module.css

@@ -29,7 +29,7 @@
 
 .icon {
   color: var(--base700);
-  margin-right: 1rem;
+  margin-inline-end: 1rem;
 }
 
 .actions {