feat: adjust overlay scrollbar position by changing where padding is applied (#41)

Author: 1egoman

components/embed-popup/popup-view.tsx

@@ -101,7 +101,7 @@ export const PopupView = ({
 
   return (
     <div ref={ref} inert={disabled} className="flex h-full w-full flex-col overflow-hidden">
-      <div className="relative flex h-full shrink-1 grow-1 flex-col p-1">
+      <div className="relative flex h-full shrink-1 grow-1 flex-col py-1">
         <motion.div
           className={cn(
             'bg-bg2 dark:bg-bg1 pointer-events-none absolute z-10 flex aspect-[1.5] w-64 items-center justify-center rounded-2xl border border-transparent transition-colors',
@@ -147,7 +147,7 @@ export const PopupView = ({
         {/* Transcript */}
         <div
           ref={transcriptRef}
-          className="flex flex-1 flex-col overflow-y-auto [mask-image:linear-gradient(0deg,rgba(0,0,0,0.2)_0%,rgba(0,0,0,1)_5%,rgba(0,0,0,1)_95%,rgba(0,0,0,0)_100%)] py-2"
+          className="flex flex-1 flex-col overflow-y-auto [mask-image:linear-gradient(0deg,rgba(0,0,0,0.2)_0%,rgba(0,0,0,1)_5%,rgba(0,0,0,1)_95%,rgba(0,0,0,0)_100%)] px-1 py-2"
         >
           <div className="flex flex-1 flex-col justify-end gap-2 pt-10">
             <AnimatePresence>
@@ -168,7 +168,7 @@ export const PopupView = ({
 
         <div
           aria-label="Voice assistant controls"
-          className="bg-bg1 border-separator1 relative flex h-12 shrink-0 grow-0 items-center gap-1 rounded-full border px-1 drop-shadow-md"
+          className="bg-bg1 border-separator1 relative mx-1 flex h-12 shrink-0 grow-0 items-center gap-1 rounded-full border px-1 drop-shadow-md"
         >
           <div className="flex gap-1">
             {visibleControls.microphone ? (