Add handling for new loaders, fix max height being applied when scrolling is disabled from #2898 (#3761)

packages/ui/src/components/base/ScrollablePanel.vue

@@ -3,11 +3,18 @@
     <div
       class="wrapper-wrapper"
       :class="{
-        'top-fade': !scrollableAtTop && !props.disableScrolling,
+        'top-fade': !scrollableAtTop && !disableScrolling,
-        'bottom-fade': !scrollableAtBottom && !props.disableScrolling,
+        'bottom-fade': !scrollableAtBottom && !disableScrolling,
       }"
     >
-      <div ref="scrollablePane" class="scrollable-pane" @scroll="onScroll">
+      <div
+        ref="scrollablePane"
+        :class="{
+          'max-h-[19rem]': !disableScrolling,
+        }"
+        class="scrollable-pane"
+        @scroll="onScroll"
+      >
         <slot />
       </div>
     </div>
@@ -17,7 +24,7 @@
 <script setup lang="ts">
 import { ref, onMounted, onUnmounted } from 'vue'
 
-const props = withDefaults(
+withDefaults(
   defineProps<{
     disableScrolling?: boolean
   }>(),
@@ -100,6 +107,5 @@ function onScroll({ target: { scrollTop, offsetHeight, scrollHeight } }) {
   overflow-y: auto;
   overflow-x: hidden;
   position: relative;
-  max-height: 19rem;
 }
 </style>

packages/utils/utils.ts

@@ -177,8 +177,15 @@ export const formatCategory = (name) => {
     return 'Colored Lighting'
   } else if (name === 'optifine') {
     return 'OptiFine'
+  } else if (name === 'bta-babric') {
+    return 'BTA (Babric)'
+  } else if (name === 'legacy-fabric') {
+    return 'Legacy Fabric'
+  } else if (name === 'java-agent') {
+    return 'Java Agent'
+  } else if (name === 'nilloader') {
+    return 'NilLoader'
   }
-
   return capitalizeString(name)
 }