[OPIK-234] [UX improvements] Unify bottom paddings

apps/opik-frontend/e2e/pages/DatasetsPage.ts

@@ -27,6 +27,7 @@ export class DatasetsPage {
       .getByRole("button", {
         name: "Create new dataset",
       })
+      .first()
       .click();
     await this.page.getByPlaceholder("Dataset name").fill(name);
 

apps/opik-frontend/e2e/pages/FeedbackDefinitionsPage.ts

@@ -64,6 +64,7 @@ export class FeedbackDefinitionsPage {
       .getByRole("button", {
         name: "Create new feedback definition",
       })
+      .first()
       .click();
     await this.page
       .getByPlaceholder("Feedback definition name")

apps/opik-frontend/e2e/pages/TracesPage.ts

@@ -17,7 +17,7 @@ export class TracesPage {
   constructor(readonly page: Page) {
     this.tableScores = page.getByTestId("feedback-score-tag");
     this.sidebarScores = page.getByLabel("Feedback Scores");
-    this.title = page.getByRole("heading", { name: "Traces" });
+    this.title = page.getByTestId("traces-page-title");
 
     this.columns = new Columns(page);
     this.filters = new Filters(page);

apps/opik-frontend/src/components/pages/CompareExperimentsPage/CompareExperimentsDetails.tsx

@@ -89,6 +89,7 @@ const CompareExperimentsDetails: React.FunctionComponent<
     return (
       <Button
         variant="outline"
+        size="sm"
         onClick={() => {
           setShowCompareFeedback(!showCompareFeedback);
         }}
@@ -195,7 +196,7 @@ const CompareExperimentsDetails: React.FunctionComponent<
 
   return (
     <div className="pb-4 pt-6">
-      <div className="mb-4 flex min-h-10 items-center justify-between">
+      <div className="mb-4 flex min-h-8 items-center justify-between">
         <h1 className="comet-title-l">{title}</h1>
         {renderCompareFeedbackScoresButton()}
       </div>

apps/opik-frontend/src/components/pages/CompareExperimentsPage/ExperimentItemsTab/ExperimentItemsTab.tsx

@@ -325,7 +325,7 @@ const ExperimentItemsTab: React.FunctionComponent<ExperimentItemsTabProps> = ({
         getRowHeightClass={getRowHeightClass}
         noData={<DataTableNoData title={noDataText} />}
       />
-      <div className="py-4 pl-6 pr-5">
+      <div className="py-4">
         <DataTablePagination
           page={page as number}
           pageChange={setPage}

apps/opik-frontend/src/components/pages/ExperimentsPage/ExperimentsFiltersButton.tsx

@@ -12,7 +12,6 @@ import useDatasetsList from "@/api/datasets/useDatasetsList";
 import { keepPreviousData } from "@tanstack/react-query";
 import { DropdownOption } from "@/types/shared";
 import useAppStore from "@/store/AppStore";
-import SelectBox from "@/components/shared/SelectBox/SelectBox";
 
 const DEFAULT_LOADED_DATASET_ITEMS = 25;
 
@@ -82,22 +81,14 @@ const ExperimentsFiltersButton: React.FunctionComponent<
                 <tr>
                   <td className="comet-body-s p-1">Where</td>
                   <td className="p-1">
-                    <SelectBox
-                      value={""}
-                      options={[]}
-                      placeholder="Dataset"
-                      onChange={() => {}}
-                      disabled
-                    />
+                    <div className="comet-body-s flex h-10 w-28 cursor-default items-center rounded-md border px-4">
+                      Dataset
+                    </div>
                   </td>
                   <td className="p-1">
-                    <SelectBox
-                      value={""}
-                      options={[]}
-                      placeholder="="
-                      onChange={() => {}}
-                      disabled
-                    />
+                    <div className="comet-body-s flex h-10 w-20 cursor-default items-center rounded-md border px-4">
+                      =
+                    </div>
                   </td>
                   <td className="p-1">
                     <LoadableSelectBox

apps/opik-frontend/src/components/pages/ExperimentsPage/ExperimentsPage.tsx

@@ -249,7 +249,7 @@ const ExperimentsPage: React.FunctionComponent = () => {
           </DataTableNoData>
         }
       />
-      <div className="py-4 pl-6 pr-5">
+      <div className="py-4">
         <DataTablePagination
           page={page}
           pageChange={setPage}

apps/opik-frontend/src/components/pages/ProjectsPage/ProjectsPage.tsx

@@ -190,7 +190,7 @@ const ProjectsPage: React.FunctionComponent = () => {
           </DataTableNoData>
         }
       />
-      <div className="pl-6 pr-5 pt-4">
+      <div className="py-4">
         <DataTablePagination
           page={page}
           pageChange={setPage}

apps/opik-frontend/src/components/pages/TracesPage/TracesPage.tsx

@@ -37,6 +37,7 @@ import { convertColumnDataToColumn } from "@/lib/table";
 import { buildDocsUrl } from "@/lib/utils";
 import { Button } from "@/components/ui/button";
 import TooltipWrapper from "@/components/shared/TooltipWrapper/TooltipWrapper";
+import useProjectById from "@/api/projects/useProjectById";
 
 const getRowId = (d: Trace | Span) => d.id;
 
@@ -47,6 +48,17 @@ const COLUMNS_ORDER_KEY = "traces-columns-order";
 const TracesPage = () => {
   const projectId = useProjectIdFromURL();
 
+  const { data: project } = useProjectById(
+    {
+      projectId,
+    },
+    {
+      refetchOnMount: false,
+    },
+  );
+
+  const name = project?.name || projectId;
+
   const [type = TRACE_DATA_TYPE.traces, setType] = useQueryParam(
     "type",
     StringParam,
@@ -204,7 +216,9 @@ const TracesPage = () => {
   return (
     <div className="pt-6">
       <div className="mb-4 flex items-center justify-between">
-        <h1 className="comet-title-l">Traces</h1>
+        <h1 data-testid="traces-page-title" className="comet-title-l">
+          {name}
+        </h1>
         <TooltipWrapper content="Refresh traces list">
           <Button variant="outline" size="icon-sm" onClick={() => refetch()}>
             <RotateCw className="size-4" />

apps/opik-frontend/src/components/ui/button.tsx

@@ -27,8 +27,8 @@ const buttonVariants = cva(
       },
       size: {
         default: "h-10 px-4 py-2",
-        sm: "h-8 rounded-md px-2",
-        lg: "h-11 rounded-md px-8",
+        sm: "h-8 px-2",
+        lg: "h-11 px-8",
         icon: "size-10",
         "icon-sm": "size-8",
         "icon-lg": "size-11",