style: use logical properties (#917)

Co-authored-by: Daniel Roe <daniel@roe.dev>

Author: iiio2

app/components/OgImage/Default.vue

@@ -74,7 +74,7 @@ const props = withDefaults(defineProps<Props>(), {
     </div>
 
     <div
-      class="absolute -top-32 -right-32 w-[550px] h-[550px] rounded-full blur-3xl"
+      class="absolute -top-32 -inset-ie-32 w-[550px] h-[550px] rounded-full blur-3xl"
       :style="{ backgroundColor: props.primaryColor + '10' }"
     />
   </div>

app/components/OgImage/Package.vue

@@ -116,7 +116,7 @@ const formattedStars = computed(() =>
     </div>
 
     <div
-      class="absolute -top-32 -right-32 w-[550px] h-[550px] rounded-full blur-3xl"
+      class="absolute -top-32 -inset-ie-32 w-[550px] h-[550px] rounded-full blur-3xl"
       :style="{ backgroundColor: primaryColor + '10' }"
     />
   </div>

app/pages/package/[...package].vue

@@ -491,7 +491,7 @@ defineOgImageComponent('Package', {
             <button
               type="button"
               @click="copyPkgName()"
-              class="copy-button absolute z-20 left-0 top-full inline-flex items-center gap-1 px-2 py-1 rounded border text-xs font-mono whitespace-nowrap transition-all duration-150 opacity-0 -translate-y-1 pointer-events-none group-hover:opacity-100 group-hover:translate-y-0 group-hover:pointer-events-auto focus-visible:opacity-100 focus-visible:translate-y-0 focus-visible:pointer-events-auto"
+              class="copy-button absolute z-20 inset-is-0 top-full inline-flex items-center gap-1 px-2 py-1 rounded border text-xs font-mono whitespace-nowrap transition-all duration-150 opacity-0 -translate-y-1 pointer-events-none group-hover:opacity-100 group-hover:translate-y-0 group-hover:pointer-events-auto focus-visible:opacity-100 focus-visible:translate-y-0 focus-visible:pointer-events-auto"
               :class="
                 copiedPkgName ? 'text-accent bg-accent/10' : 'text-fg-muted bg-bg border-border'
               "