Can't get carrousel cards to stay inside the carrousel

[theodufort]

Its been 3 days that i have been banging my head with some stupid css on this page:

<div>
      <Carousel
        opts={{
          align: "start",
          containScroll: "trimSnaps",
          dragFree: true,
          loop: true,
        }}
        className="max-w-auto"
      >
        <Card>
          <CardHeader>
            <div className="flex items-center justify-between align-middle">
              <CardTitle className="inline-block">{subject}</CardTitle>
              <div className="flex gap-2">
                <CarouselPrevious className="static" />
                <CarouselNext className="static" />
              </div>
            </div>
          </CardHeader>
          <CardContent className="aspect-square items-center justify-center m-auto w-auto">
            <CarouselContent className="pl-2 md:pl-4">
              {notes.map((note) => (
                <CarouselItem
                  key={note.id}
                  onClick={() => handleNoteClick(note)}
                  className="pl-1 basis-auto"
                >
                  <Card className="cursor-pointer transition-all duration-200 hover:bg-primary/90 hover:text-black">
                    <CardContent className="aspect-square items-center justify-center p-4">
                      <span className="overflow-hidden text-sm font-semibold text-center">
                        {note.title}
                      </span>
                    </CardContent>
                  </Card>
                </CarouselItem>
              ))}
            </CarouselContent>
          </CardContent>
          <CardFooter></CardFooter>
        </Card>
      </Carousel>
      <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Edit Note</DialogTitle>
            <DialogDescription>
              Make changes to your note here. Click save when you're done.
            </DialogDescription>
          </DialogHeader>
          <div className="flex flex-col space-y-4 py-4">
            <div className="flex flex-col sm:flex-row items-start sm:items-center gap-4">
              <Label htmlFor="title" className="min-w-20">
                Title
              </Label>
              <Input
                id="title"
                value={editedTitle}
                onChange={(e) => setEditedTitle(e.target.value)}
                className="flex-1"
              />
            </div>
            <div className="flex flex-col sm:flex-row items-start gap-4">
              <Label htmlFor="content" className="min-w-20 mt-2">
                Content
              </Label>
              <Textarea
                id="content"
                value={editedContent}
                onChange={(e) => setEditedContent(e.target.value)}
                className="flex-1 min-h-[200px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
              />
            </div>
          </div>
          <DialogFooter className="flex flex-col sm:flex-row gap-2 sm:gap-4 mt-4">
            <Button onClick={handleNoteModification}>Save changes</Button>
            <Button variant="outline" onClick={() => setIsDialogOpen(false)}>
              Cancel
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>

My goal is that the cards inside the carrousel item auto shrink which i know i can do with the basis-.
But since i have the sidebar on the left of the screen, each time i add content inside a carrousel item, it makes the carrousel overflow at the right on x axis.