frontend ui enhacements

src/modules/scrollView.ts

@@ -12,30 +12,44 @@ export default function useScrollView({ targetId }: { targetId: string }) {
   let topBound: number;
   const scrollStartHeight = 445;
 
-  const clampedScroll = computed(() => {
-    if (targetHeight.value === 0) { return 0; }
-    topBound = -targetHeight.value + 450;
-    return Math.max(topBound, Math.min(scroll.value, 0)) as number;
-  })
-
   const scrollView = computed(() => {
+
     if (clampedScroll.value === 0) {
       scroll.value = 0;
     } else if (clampedScroll.value === topBound) {
       scroll.value = topBound;
     }
+
+    // x, y, width, height
+    // width and height should be dynamic
     return `0 ${clampedScroll.value} 350 500`;
   });
 
+  const clampedScroll = computed(() => {
+    if (targetHeight.value === 0) { return 0; }
+    topBound = -targetHeight.value + 450;
+    return Math.max(topBound, Math.min(scroll.value, 0)) as number;
+  })
+
   const getHeight = () => {
     if (scrollTarget) {
       return scrollTarget.getBoundingClientRect().height as number;
     }
   }
 
-  const updateView = (verticalScroll: number) => {
+  const getWidth = () => {
     if (scrollTarget) {
+      return scrollTarget.getBoundingClientRect().width as number;
+    }
+  }
+
+  const updateView = (verticalScroll: number) => {
+
+    if (scrollTarget) {
+
       const heightResult = getHeight();
+      const widthResult = getWidth();
+
       if (heightResult) {
         // only scroll if renderer scrollStart
         if (heightResult > scrollStartHeight) {