Bugfix/selectable logs and word break

src/components/DropDownBuildFlags.tsx

@@ -37,19 +37,19 @@ export function DropDownBuildFlags() {
 
   return (
     <DropdownMenu>
-      <DropdownMenuTrigger asChild className="flex items-center gap-2">
-        <Button variant="outline">
+      <DropdownMenuTrigger asChild className="flex w-full gap-2">
+        <Button variant="outline" className="w-full justify-between capitalize">
           {`Build Flags Added - ${amountOfEditedFlags}`}
           <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent
         style={{
-          maxHeight: "10rem",
+          maxHeight: "16rem",
           overflow: "auto",
           width: "fit-content",
-          marginRight: "4rem",
-          marginTop: "0.25rem",
+          marginRight: "1rem",
+          marginTop: "0.5rem",
         }}
       >
         {sortedColconFlags.map((flag) => (

src/components/DropDownBuildType.tsx

@@ -1,24 +1,24 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import { useAtom } from "jotai"
-import { Check, ChevronsUpDown } from "lucide-react"
+import * as React from "react";
+import { useAtom } from "jotai";
+import { Check, ChevronsUpDown } from "lucide-react";
 
-import { cn } from "@/lib/utils"
-import { Button } from "@/components/ui/button"
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
 import {
   Command,
   CommandEmpty,
   CommandGroup,
   CommandInput,
   CommandItem,
-} from "@/components/ui/command"
+} from "@/components/ui/command";
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
-} from "@/components/ui/popover"
-import { colconBuildTypeAtom } from "@/app/jotai/atoms"
+} from "@/components/ui/popover";
+import { colconBuildTypeAtom } from "@/app/jotai/atoms";
 
 const buildTypes = [
   {
@@ -33,11 +33,11 @@ const buildTypes = [
     value: "relwithdebinfo",
     label: "Release with Debug Info",
   },
-]
+];
 
 export function DropDownBuildType() {
-  const [open, setOpen] = React.useState(false)
-  const [selected, setSelected] = useAtom(colconBuildTypeAtom)
+  const [open, setOpen] = React.useState(false);
+  const [selected, setSelected] = useAtom(colconBuildTypeAtom);
 
   return (
     <Popover open={open} onOpenChange={setOpen}>
@@ -46,13 +46,13 @@ export function DropDownBuildType() {
           variant="outline"
           role="combobox"
           aria-expanded={open}
-          className="w-fit justify-between capitalize"
+          className="w-full justify-between capitalize"
         >
           {selected.label !== "" ? selected.label : "Select build type"}
           <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
         </Button>
       </PopoverTrigger>
-      <PopoverContent className="w-[200px] p-0">
+      <PopoverContent className="mr-12 mt-2 w-[200px] p-0">
         <Command>
           <CommandInput placeholder="Search build type" />
           <CommandEmpty>No build type found.</CommandEmpty>
@@ -61,8 +61,8 @@ export function DropDownBuildType() {
               <CommandItem
                 key={buildType.value}
                 onSelect={() => {
-                  setSelected(buildType)
-                  setOpen(false)
+                  setSelected(buildType);
+                  setOpen(false);
                 }}
               >
                 <Check
@@ -78,5 +78,5 @@ export function DropDownBuildType() {
         </Command>
       </PopoverContent>
     </Popover>
-  )
+  );
 }

src/components/rightPane.tsx

@@ -9,6 +9,8 @@ import { format } from "date-fns";
 import formatDistance from "date-fns/formatDistance";
 import { useAtom } from "jotai";
 
+import { Button } from "@/components/ui/button";
+import { Label } from "@/components/ui/label";
 import { Progress } from "@/components/ui/progress";
 import {
   autowareFolderPathAtom,
@@ -18,13 +20,8 @@ import {
   packageNamesAtom,
 } from "@/app/jotai/atoms";
 
+import { DropDownBuildFlags } from "./DropDownBuildFlags";
 import { DropDownBuildType } from "./DropDownBuildType";
-import { Button } from "./ui/button";
-
-const DropDownBuildFlags = dynamic(
-  () => import("./DropDownBuildFlags").then((mod) => mod.DropDownBuildFlags),
-  { ssr: false }
-);
 
 const RightPane = () => {
   const [progress, setProgress] = React.useState(0);
@@ -268,7 +265,7 @@ const RightPane = () => {
   }, []);
 
   return (
-    <div className="flex w-full flex-col items-center justify-center gap-4 p-4">
+    <div className="flex w-full flex-col items-center justify-center gap-3 p-4">
       <div className="flex items-center gap-2">
         <Button
           onClick={async () => {
@@ -307,14 +304,15 @@ const RightPane = () => {
           Save Logs
         </Button>
       </div>
-      <span>
+
+      <Label>
         Packages Built {builtPackages}/{totalPackages}
-      </span>
-      <span>Build Time: {buildTime}</span>
+      </Label>
+      <Label>Build Time: {buildTime}</Label>
 
       <Progress value={progress} className="w-[60%]" />
 
-      <div className="flex items-center gap-2">
+      <div className="flex items-center justify-between gap-2">
         <Button
           disabled={
             (buildLogs.length > 0 &&
@@ -325,6 +323,7 @@ const RightPane = () => {
           onClick={async () => {
             await cancelBuild();
           }}
+          variant={"destructive"}
         >
           Cancel Build
         </Button>
@@ -345,20 +344,20 @@ const RightPane = () => {
           Build
         </Button>
       </div>
-      <div className="flex items-center gap-2">
+      <div className="flex w-full items-center gap-2">
         <DropDownBuildType />
         <DropDownBuildFlags />
       </div>
 
       {/* Big area to show the build logs */}
       <div
-        className="h-full w-[28rem] max-w-md overflow-x-clip overflow-y-scroll rounded-md border p-2"
+        className="flex h-full w-full flex-col gap-3 overflow-y-scroll rounded-md border p-2"
         ref={textRef}
       >
         {buildLogs.map((log, index) => (
-          <div key={index} className="max-w-md overflow-x-clip">
+          <Label key={index} className="select-text break-words">
             {log}
-          </div>
+          </Label>
         ))}
       </div>
     </div>