Repository: Significant-Gravitas/Auto-GPT
File: autogpt_platform/frontend/src/components/edit/control/BlocksControl.tsx (TypeScript)

Code before:
                <Badge
                  key={category}
                  variant={
                    selectedCategory === category ? "default" : "outline"
                  }
                  className={`cursor-pointer ${getPrimaryCategoryColor([{ category, description: "" }])}`}
                  onClick={() =>
                    setSelectedCategory(
                      selectedCategory === category ? null : category,
                    )
                  }
                >
                  {beautifyString(category)}
                </Badge>
              ))}
            </div>
          </CardHeader>
          <CardContent className="p-1">
            <ScrollArea
              className="h-[60vh]"
              data-id="blocks-control-scroll-area"
            >
              {filteredBlocks.map((block) => (
                <Card
                  key={block.id}
                  className={`m-2 my-4 flex h-20 border`}
                  data-id={`block-card-${block.id}`}
                  onClick={() => addBlock(block.id, block.name)}
                >
                  {/* This div needs to be 10px wide and the same height as the card and be the primary color showing up on top of the card with matching rounded corners */}
                  <div
                    className={`z-20 flex min-w-4 flex-shrink-0 rounded-l-xl border ${getPrimaryCategoryColor(block.categories)}`}
                  ></div>

                  <div className="mx-3 flex flex-1 items-center justify-between">
                    <div className="mr-2 min-w-0 flex-1">
                      <span
                        className="block truncate text-base font-semibold"
                        data-id={`block-name-${block.id}`}
                      >
                        {beautifyString(block.name)}
                      </span>
                      <span className="block break-words text-sm font-normal text-gray-500">
                        {block.description}
                      </span>
                    </div>
                    <div
                      className="flex flex-shrink-0 items-center gap-1"
                      data-id={`block-tooltip-${block.id}`}
                    ></div>
                  </div>

Review comment (suggestion):
```suggestion
                  className="m-2 my-4 flex h-20 border"
```

Code after:
                <Badge
                  key={category}
                  variant={
                    selectedCategory === category ? "default" : "outline"
                  }
                  className={`cursor-pointer ${getPrimaryCategoryColor([{ category, description: "" }])}`}
                  onClick={() =>
                    setSelectedCategory(
                      selectedCategory === category ? null : category,
                    )
                  }
                >
                  {beautifyString(category)}
                </Badge>
              ))}
            </div>
          </CardHeader>
          <CardContent className="p-1">
            <ScrollArea
              className="h-[60vh]"
              data-id="blocks-control-scroll-area"
            >
              {filteredBlocks.map((block) => (
                <Card
                  key={block.id}
                  className="m-2 my-4 flex h-20 border"
                  data-id={`block-card-${block.id}`}
                  onClick={() => addBlock(block.id, block.name)}
                >
                  {/* This div needs to be 10px wide and the same height as the card and be the primary color showing up on top of the card with matching rounded corners */}
                  <div
                    className={`z-20 flex min-w-4 flex-shrink-0 rounded-l-xl border ${getPrimaryCategoryColor(block.categories)}`}
                  ></div>

                  <div className="mx-3 flex flex-1 items-center justify-between">
                    <div className="mr-2 min-w-0 flex-1">
                      <span
                        className="block truncate text-base font-semibold"
                        data-id={`block-name-${block.id}`}
                      >
                        {beautifyString(block.name)}
                      </span>
                      <span className="block break-words text-sm font-normal text-gray-500">
                        {block.description}
                      </span>
                    </div>
                    <div
                      className="flex flex-shrink-0 items-center gap-1"
                      data-id={`block-tooltip-${block.id}`}
                    ></div>
                  </div>