refactor: account, repository and notification row layouts

src/renderer/App.tsx

@@ -7,7 +7,7 @@ import {
   useLocation,
 } from 'react-router-dom';
 
-import { BaseStyles, ThemeProvider } from '@primer/react';
+import { BaseStyles, Box, ThemeProvider } from '@primer/react';
 
 import { Loading } from './components/Loading';
 import { Sidebar } from './components/Sidebar';
@@ -47,7 +47,7 @@ export const App = () => {
       <BaseStyles>
         <AppProvider>
           <Router>
-            <div className="flex flex-col min-h-screen overflow-x-hidden overflow-y-auto pl-sidebar bg-gitify-background">
+            <Box className="flex flex-col min-h-screen overflow-x-hidden overflow-y-auto pl-sidebar bg-gitify-background">
               <Loading />
               <Sidebar />
               <Routes>
@@ -93,7 +93,7 @@ export const App = () => {
                   element={<LoginWithOAuthAppRoute />}
                 />
               </Routes>
-            </div>
+            </Box>
           </Router>
         </AppProvider>
       </BaseStyles>

src/renderer/components/avatars/AvatarWithFallback.tsx

@@ -26,12 +26,15 @@ export const AvatarWithFallback: React.FC<IAvatarWithFallback> = ({
   const [isBroken, setIsBroken] = useState(false);
 
   const isNonHuman = isNonHumanUser(userType);
+
+  // TODO explore using AnchoredOverlay component (https://primer.style/components/anchored-overlay/react/alpha) to render Avatar Card on hover
   return (
     <Stack
       direction="horizontal"
       align="center"
       gap="condensed"
       data-testid="avatar"
+      className="truncate"
     >
       {!src || isBroken ? (
         isNonHuman ? (
@@ -48,7 +51,12 @@ export const AvatarWithFallback: React.FC<IAvatarWithFallback> = ({
           onError={() => setIsBroken(true)}
         />
       )}
-      {name && <Text>{name}</Text>}
+      {name && (
+        // TODO add truncation logic for long names
+        <Text className="block truncate flex-shrink overflow-ellipsis">
+          {name}
+        </Text>
+      )}
     </Stack>
   );
 };

src/renderer/components/fields/Checkbox.tsx

@@ -1,4 +1,7 @@
 import type { FC, ReactNode } from 'react';
+
+import { Stack } from '@primer/react';
+
 import { cn } from '../../utils/cn';
 import { Tooltip } from './Tooltip';
 
@@ -13,32 +16,34 @@ export interface ICheckbox {
 
 export const Checkbox: FC<ICheckbox> = (props: ICheckbox) => {
   return (
-    <div className="mt-3 mb-2 text-sm">
-      <div className="flex items-center">
-        <input
-          type="checkbox"
-          id={props.name}
-          className="size-4 rounded-sm cursor-pointer"
-          checked={props.checked}
-          onChange={props.onChange}
-          disabled={props.disabled}
-        />
+    <Stack
+      direction="horizontal"
+      gap="condensed"
+      align="center"
+      className="text-sm"
+    >
+      <input
+        type="checkbox"
+        id={props.name}
+        className="size-4 rounded-sm cursor-pointer"
+        checked={props.checked}
+        onChange={props.onChange}
+        disabled={props.disabled}
+        data-testid={`checkbox-${props.name}`}
+      />
 
-        <div className="flex items-center ml-3">
-          <label
-            htmlFor={props.name}
-            className={cn(
-              'font-medium text-gitify-font cursor-pointer',
-              props.disabled && 'line-through',
-            )}
-          >
-            {props.label}
-          </label>
-          {props.tooltip && (
-            <Tooltip name={`tooltip-${props.name}`} tooltip={props.tooltip} />
-          )}
-        </div>
-      </div>
-    </div>
+      <label
+        htmlFor={props.name}
+        className={cn(
+          'font-medium text-gitify-font cursor-pointer',
+          props.disabled && 'line-through',
+        )}
+      >
+        {props.label}
+      </label>
+      {props.tooltip && (
+        <Tooltip name={`tooltip-${props.name}`} tooltip={props.tooltip} />
+      )}
+    </Stack>
   );
 };

src/renderer/components/fields/RadioGroup.tsx

@@ -1,4 +1,7 @@
 import type { ChangeEvent, FC } from 'react';
+
+import { Stack } from '@primer/react';
+
 import type { RadioGroupItem } from '../../types';
 import { FieldLabel } from './FieldLabel';
 
@@ -12,33 +15,38 @@ export interface IRadioGroup {
 
 export const RadioGroup: FC<IRadioGroup> = (props: IRadioGroup) => {
   return (
-    <div className="flex items-start my-2 text-sm font-medium">
+    <Stack
+      direction="horizontal"
+      gap="condensed"
+      align="center"
+      className="text-sm"
+    >
       <FieldLabel name={props.name} label={props.label} />
 
-      <div
-        className="flex items-center space-x-4"
-        role="group"
-        aria-labelledby={props.name}
-      >
-        {props.options.map((item) => {
-          const name = `${props.name}_${item.value.toLowerCase()}`;
+      {props.options.map((item) => {
+        const name = `radio-${props.name}-${item.value}`.toLowerCase();
 
-          return (
-            <div className="flex items-center gap-2" key={name}>
-              <input
-                type="radio"
-                className="size-4 cursor-pointer"
-                id={name}
-                name={props.name}
-                value={item.value}
-                onChange={props.onChange}
-                checked={item.value === props.value}
-              />
-              <FieldLabel name={name} label={item.label} />
-            </div>
-          );
-        })}
-      </div>
-    </div>
+        return (
+          <Stack
+            direction="horizontal"
+            gap="condensed"
+            align="center"
+            key={name}
+          >
+            <input
+              type="radio"
+              className="size-4 cursor-pointer"
+              id={name}
+              name={props.name}
+              value={item.value}
+              onChange={props.onChange}
+              checked={item.value === props.value}
+              data-testid={name}
+            />
+            <FieldLabel name={name} label={item.label} />
+          </Stack>
+        );
+      })}
+    </Stack>
   );
 };

src/renderer/components/fields/Tooltip.test.tsx

@@ -3,7 +3,7 @@ import { type ITooltip, Tooltip } from './Tooltip';
 
 describe('renderer/components/fields/Tooltip.tsx', () => {
   const props: ITooltip = {
-    name: 'tooltip',
+    name: 'test',
     tooltip: 'This is some tooltip text',
   };
 
@@ -15,7 +15,7 @@ describe('renderer/components/fields/Tooltip.tsx', () => {
   it('should display on mouse enter / leave', () => {
     render(<Tooltip {...props} />);
 
-    const tooltipElement = screen.getByLabelText('tooltip');
+    const tooltipElement = screen.getByTestId('tooltip-test');
 
     fireEvent.mouseEnter(tooltipElement);
     expect(tooltipElement).toMatchSnapshot();