Fix: Knob not Working with Accordion Content Transform

gabe-serna · Nov 7, 2024 · 022dbf3 · 022dbf3
1 parent 0e9d454
commit 022dbf3
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 22 deletions.
diff --git a/app/audio/MidiEditor.tsx b/app/audio/MidiEditor.tsx
@@ -70,25 +70,24 @@ export default function MidiEditor() {
                 <AccordionTrigger
                   ref={midiAdjustments}
                   onClick={handleOpen}
-                  className="font-heading w-[300px] rounded-3xl border-2 border-border bg-accent px-6"
+                  className="font-heading w-[300px] rounded-3xl border-2 border-border bg-accent px-6 data-[state=open]:rounded-b-none"
                 >
                   Midi Adjustments
                 </AccordionTrigger>
-                <AccordionContent className="rounded-3xl border-2 border-border bg-card px-6 dark:bg-stone-900">
+                <AccordionContent className="rounded-b-3xl border-2 border-t-0 border-border bg-card px-6 dark:bg-stone-900">
                   <MidiAdjustments />
                 </AccordionContent>
               </AccordionItem>
               <AccordionItem value="audio-controls">
                 <AccordionTrigger
                   ref={audioControls}
                   onClick={handleOpen}
-                  className="font-heading w-[300px] rounded-3xl border-2 border-border bg-accent px-6"
+                  className="font-heading w-[300px] rounded-3xl border-2 border-border bg-accent px-6 data-[state=open]:rounded-b-none"
                 >
                   Audio Controls
                 </AccordionTrigger>
-                <AccordionContent className="flex h-72 flex-col gap-4 rounded-3xl border-2 border-border bg-card px-6 dark:bg-stone-900">
-                  {/* <AudioMixer name="Midi Audio" /> */}
-                  {/* knob inside of the accordion content does not work because of the -translate-y-10 class */}
+                <AccordionContent className="flex h-72 flex-col gap-4 rounded-b-3xl border-2 border-t-0 border-border bg-card px-6 dark:bg-stone-900">
+                  <AudioMixer name="Midi Audio" />
                   <Knob
                     size={100}
                     angleOffset={220}

diff --git a/app/globals.css b/app/globals.css
@@ -149,17 +149,3 @@ a,
     visibility 0.3s ease,
     background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
 }
-
-.SliderRoot[data-orientation="vertical"] {
-  flex-direction: column;
-  width: 20px;
-  height: 100px;
-}
-
-.SliderTrack[data-orientation="vertical"] {
-  width: 3px;
-}
-
-.SliderRange[data-orientation="vertical"] {
-  width: 100%;
-}
diff --git a/components/ui/accordion.tsx b/components/ui/accordion.tsx
@@ -42,10 +42,10 @@ const AccordionContent = React.forwardRef<
 >(({ className, children, ...props }, ref) => (
   <AccordionPrimitive.Content
     ref={ref}
-    className="-translate-y-10 overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
     {...props}
   >
-    <div className={cn("pb-4 pt-12", className)}>{children}</div>
+    <div className={cn("pb-4 pt-4", className)}>{children}</div>
   </AccordionPrimitive.Content>
 ));
 

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -65,17 +65,21 @@ const config = {
         "accordion-down": {
           from: {
             height: "0",
+            transform: "translateY(-20px)",
           },
           to: {
             height: "var(--radix-accordion-content-height)",
+            transform: "translateY(0)",
           },
         },
         "accordion-up": {
           from: {
             height: "var(--radix-accordion-content-height)",
+            transform: "translateY(0)",
           },
           to: {
             height: "0",
+            transform: "translateY(-20px)",
           },
         },
       },