refine: update style of environment variables in launcher offcanvas

Author: leafty

client/src/features/sessionsV2/SessionView/EnvVariablesCard.tsx

@@ -16,8 +16,7 @@
  * limitations under the License.
  */
 
-import cx from "classnames";
-import { Card, CardBody, Col, Row, Table } from "reactstrap";
+import { Col, ListGroup, ListGroupItem, Row } from "reactstrap";
 
 import type { SessionLauncher } from "../api/sessionLaunchersV2.api";
 
@@ -35,49 +34,17 @@ export default function EnvVariablesCard({
   }
 
   return (
-    <Card data-cy="env-variables-card" className={cx("border")}>
-      <CardBody className={cx("d-flex", "flex-column")}>
-        <Row>
-          <Col
-            xs={12}
-            className={cx(
-              "d-flex",
-              "flex-wrap",
-              "flex-sm-nowrap",
-              "align-items-start",
-              "justify-content-between",
-              "pb-2",
-              "gap-2"
-            )}
-          >
-            <Table size="sm">
-              <tbody>
-                {envVariables.map((env) => (
-                  <EnvVariableRow
-                    key={env.name}
-                    env={env.name}
-                    value={env.value}
-                  />
-                ))}
-              </tbody>
-            </Table>
-          </Col>
-        </Row>
-      </CardBody>
-    </Card>
-  );
-}
-
-interface EnvRowParameterProps {
-  env: string;
-  value: string | null | undefined;
-}
-
-function EnvVariableRow({ env, value }: EnvRowParameterProps) {
-  return (
-    <tr>
-      <th scope="row">{env}</th>
-      <td>{value ?? ""}</td>
-    </tr>
+    <ListGroup>
+      {envVariables.map(({ name, value }) => (
+        <ListGroupItem key={`env-var-${name}`}>
+          <Row>
+            <Col xs={6} className="fw-bold">
+              {name}
+            </Col>
+            <Col xs={6}>{value ?? ""}</Col>
+          </Row>
+        </ListGroupItem>
+      ))}
+    </ListGroup>
   );
 }

client/src/features/sessionsV2/SessionView/SessionView.tsx

@@ -19,6 +19,7 @@ import { skipToken } from "@reduxjs/toolkit/query";
 import cx from "classnames";
 import { ReactNode, useCallback, useMemo, useState } from "react";
 import {
+  Braces,
   CircleFill,
   Clock,
   Database,
@@ -559,8 +560,18 @@ export function SessionView({
           )}
           {launcher && (
             <div>
-              <div className={cx("d-flex", "justify-content-between", "mb-2")}>
-                <h4 className="my-auto">Environment Variables</h4>
+              <div
+                className={cx(
+                  "d-flex",
+                  "align-items-center",
+                  "justify-content-between",
+                  "mb-2"
+                )}
+              >
+                <h4 className={cx("mb-0", "me-2")}>
+                  <Braces className={cx("me-1", "bi")} />
+                  Environment Variables
+                </h4>
                 <PermissionsGuard
                   disabled={null}
                   enabled={