small rtl style fixes

Author: jacobsjo

src/components/DatapackEntry.vue

@@ -44,7 +44,7 @@ import { computed } from 'vue';
         display: flex;
         align-items: center;
         position: relative;
-        padding-right: 0.3rem;
+        padding-inline-end: 0.3rem;
         gap: 0.3rem;
     }
 
@@ -59,6 +59,10 @@ import { computed } from 'vue';
         user-select: none;
     }
 
+    .image:dir(rtl) {
+        border-radius: 0 0.5rem 0.5rem 0;
+    }
+
     .description {
         flex-grow: 1;
         text-align: center;

src/components/TipMessage.vue

@@ -78,13 +78,13 @@ a.github:hover {
 a img{
     height: 13px;
     width: 20px;
-    padding-right: 0.3rem;
+    padding-inline-end: 0.3rem;
 }
 
 a svg {
     height: 16px;
     width: 20px;
-    padding-right: 0.3rem;
+    padding-inline-end: 0.3rem;
     margin-bottom: -0.1rem;
 }
 

src/components/dropdown/OpenDropdown.vue

@@ -241,11 +241,12 @@ const PRESET_DATAPACKS = computed(() => {
 
 .title {
     color: rgb(53, 53, 53);
-    text-align: left;
+    text-align: initial;
     width: 100%;
+    box-sizing: border-box;
     margin-top: 0;
     font-size: smaller;
-    padding-left: 1rem;
+    padding-inline-start: 1rem;
     margin-bottom: 0.2rem;
 }