fix: added padding back

web/src/routes/Birdseye.jsx

@@ -4,10 +4,10 @@ import Heading from '../components/Heading';
 
 export default function Birdseye() {
   return (
-    <div className="space-y-4">
-      <Heading size="2xl">Birdseye</Heading>
+    <div className='space-y-4 p-2 px-4'>
+      <Heading size='2xl'>Birdseye</Heading>
       <div>
-        <JSMpegPlayer camera="birdseye" />
+        <JSMpegPlayer camera='birdseye' />
       </div>
     </div>
   );

web/src/routes/CameraMap.jsx

@@ -20,10 +20,7 @@ export default function CameraMasks({ camera, url }) {
     zones,
   } = cameraConfig;
 
-  const {
-    width,
-    height,
-  } = cameraConfig.detect;
+  const { width, height } = cameraConfig.detect;
 
   const [{ width: scaledWidth }] = useResizeObserver(imageRef);
   const imageScale = scaledWidth / width;
@@ -32,8 +29,8 @@ export default function CameraMasks({ camera, url }) {
     Array.isArray(motionMask)
       ? motionMask.map((mask) => getPolylinePoints(mask))
       : motionMask
-        ? [getPolylinePoints(motionMask)]
-        : []
+      ? [getPolylinePoints(motionMask)]
+      : []
   );
 
   const [zonePoints, setZonePoints] = useState(
@@ -47,8 +44,8 @@ export default function CameraMasks({ camera, url }) {
         [name]: Array.isArray(objectFilters[name].mask)
           ? objectFilters[name].mask.map((mask) => getPolylinePoints(mask))
           : objectFilters[name].mask
-            ? [getPolylinePoints(objectFilters[name].mask)]
-            : [],
+          ? [getPolylinePoints(objectFilters[name].mask)]
+          : [],
       }),
       {}
     )
@@ -131,11 +128,11 @@ ${motionMaskPoints.map((mask, i) => `      - ${polylinePointsToPolyline(mask)}`)
   const handleCopyZones = useCallback(async () => {
     await window.navigator.clipboard.writeText(`  zones:
 ${Object.keys(zonePoints)
-    .map(
-      (zoneName) => `    ${zoneName}:
+  .map(
+    (zoneName) => `    ${zoneName}:
       coordinates: ${polylinePointsToPolyline(zonePoints[zoneName])}`
-    )
-    .join('\n')}`);
+  )
+  .join('\n')}`);
   }, [zonePoints]);
 
   // Object methods
@@ -167,14 +164,14 @@ ${Object.keys(zonePoints)
     await window.navigator.clipboard.writeText(`  objects:
     filters:
 ${Object.keys(objectMaskPoints)
-    .map((objectName) =>
-      objectMaskPoints[objectName].length
-        ? `      ${objectName}:
+  .map((objectName) =>
+    objectMaskPoints[objectName].length
+      ? `      ${objectName}:
         mask: ${polylinePointsToPolyline(objectMaskPoints[objectName])}`
-        : ''
-    )
-    .filter(Boolean)
-    .join('\n')}`);
+      : ''
+  )
+  .filter(Boolean)
+  .join('\n')}`);
   }, [objectMaskPoints]);
 
   const handleAddToObjectMask = useCallback(
@@ -199,22 +196,22 @@ ${Object.keys(objectMaskPoints)
   );
 
   return (
-    <div className="flex-col space-y-4">
-      <Heading size="2xl">{camera} mask & zone creator</Heading>
+    <div className='flex-col space-y-4 p-2 px-4'>
+      <Heading size='2xl'>{camera} mask & zone creator</Heading>
 
       <Card
         content={
           <p>
             This tool can help you create masks & zones for your {camera} camera. When done, copy each mask
-            configuration into your <code className="font-mono">config.yml</code> file restart your Frigate instance to
+            configuration into your <code className='font-mono'>config.yml</code> file restart your Frigate instance to
             save your changes.
           </p>
         }
-        header="Warning"
+        header='Warning'
       />
 
-      <div className="space-y-4">
-        <div className="relative">
+      <div className='space-y-4'>
+        <div className='relative'>
           <img ref={imageRef} src={`${apiHost}/api/${camera}/latest.jpg`} />
           <EditableMask
             onChange={handleUpdateEditable}
@@ -225,15 +222,15 @@ ${Object.keys(objectMaskPoints)
             height={height}
           />
         </div>
-        <div className="max-w-xs">
-          <Switch checked={snap} label="Snap to edges" labelPosition="after" onChange={handleChangeSnap} />
+        <div className='max-w-xs'>
+          <Switch checked={snap} label='Snap to edges' labelPosition='after' onChange={handleChangeSnap} />
         </div>
       </div>
 
-      <div className="flex-col space-y-4">
+      <div className='flex-col space-y-4'>
         <MaskValues
           editing={editing}
-          title="Motion masks"
+          title='Motion masks'
           onCopy={handleCopyMotionMasks}
           onCreate={handleAddMask}
           onEdit={handleEditMask}
@@ -245,20 +242,20 @@ ${Object.keys(objectMaskPoints)
 
         <MaskValues
           editing={editing}
-          title="Zones"
+          title='Zones'
           onCopy={handleCopyZones}
           onCreate={handleAddZone}
           onEdit={handleEditZone}
           onRemove={handleRemoveZone}
           points={zonePoints}
-          yamlPrefix="zones:"
+          yamlPrefix='zones:'
           yamlKeyPrefix={zoneYamlKeyPrefix}
         />
 
         <MaskValues
           isMulti
           editing={editing}
-          title="Object masks"
+          title='Object masks'
           onAdd={handleAddToObjectMask}
           onCopy={handleCopyObjectMasks}
           onCreate={handleAddObjectMask}
@@ -357,31 +354,31 @@ function EditableMask({ onChange, points, scale, snap, width, height }) {
 
   return (
     <div
-      className="absolute"
+      className='absolute'
       style={`top: -${MaskInset}px; right: -${MaskInset}px; bottom: -${MaskInset}px; left: -${MaskInset}px`}
     >
       {!scaledPoints
         ? null
         : scaledPoints.map(([x, y], i) => (
-          <PolyPoint
-            boundingRef={boundingRef}
-            index={i}
-            onMove={handleMovePoint}
-            onRemove={handleRemovePoint}
-            x={x + MaskInset}
-            y={y + MaskInset}
-          />
-        ))}
-      <div className="absolute inset-0 right-0 bottom-0" onClick={handleAddPoint} ref={boundingRef} />
+            <PolyPoint
+              boundingRef={boundingRef}
+              index={i}
+              onMove={handleMovePoint}
+              onRemove={handleRemovePoint}
+              x={x + MaskInset}
+              y={y + MaskInset}
+            />
+          ))}
+      <div className='absolute inset-0 right-0 bottom-0' onClick={handleAddPoint} ref={boundingRef} />
       <svg
-        width="100%"
-        height="100%"
-        className="absolute pointer-events-none"
+        width='100%'
+        height='100%'
+        className='absolute pointer-events-none'
         style={`top: ${MaskInset}px; right: ${MaskInset}px; bottom: ${MaskInset}px; left: ${MaskInset}px`}
       >
         {!scaledPoints ? null : (
           <g>
-            <polyline points={polylinePointsToPolyline(scaledPoints)} fill="rgba(244,0,0,0.5)" />
+            <polyline points={polylinePointsToPolyline(scaledPoints)} fill='rgba(244,0,0,0.5)' />
           </g>
         )}
       </svg>
@@ -444,15 +441,15 @@ function MaskValues({
   );
 
   return (
-    <div className="overflow-hidden" onMouseOver={handleMousein} onMouseOut={handleMouseout}>
-      <div className="flex space-x-4">
-        <Heading className="flex-grow self-center" size="base">
+    <div className='overflow-hidden' onMouseOver={handleMousein} onMouseOut={handleMouseout}>
+      <div className='flex space-x-4'>
+        <Heading className='flex-grow self-center' size='base'>
           {title}
         </Heading>
         <Button onClick={onCopy}>Copy</Button>
         <Button onClick={onCreate}>Add</Button>
       </div>
-      <pre className="relative overflow-auto font-mono text-gray-900 dark:text-gray-100 rounded bg-gray-100 dark:bg-gray-800 p-2">
+      <pre className='relative overflow-auto font-mono text-gray-900 dark:text-gray-100 rounded bg-gray-100 dark:bg-gray-800 p-2'>
         {yamlPrefix}
         {Object.keys(points).map((mainkey) => {
           if (isMulti) {
@@ -460,7 +457,7 @@ function MaskValues({
               <div>
                 {`    ${mainkey}:\n      mask:\n`}
                 {onAdd && showButtons ? (
-                  <Button className="absolute -mt-12 right-0 font-sans" data-key={mainkey} onClick={handleAdd}>
+                  <Button className='absolute -mt-12 right-0 font-sans' data-key={mainkey} onClick={handleAdd}>
                     {`Add to ${mainkey}`}
                   </Button>
                 ) : null}
@@ -506,13 +503,13 @@ function Item({ mainkey, subkey, editing, handleEdit, points, showButtons, handl
         editing.key === mainkey && editing.subkey === subkey ? 'text-blue-800 dark:text-blue-600' : ''
       }`}
       onClick={handleEdit}
-      title="Click to edit"
+      title='Click to edit'
     >
       {`${yamlKeyPrefix(points, mainkey, subkey)}${polylinePointsToPolyline(points)}`}
       {showButtons ? (
         <Button
-          className="absolute top-0 right-0"
-          color="red"
+          className='absolute top-0 right-0'
+          color='red'
           data-key={mainkey}
           data-subkey={subkey}
           onClick={handleRemove}

web/src/routes/Debug.jsx

@@ -33,9 +33,9 @@ export default function Debug() {
   }, [config]);
 
   return (
-    <div className="space-y-4">
+    <div className='space-y-4 p-2 px-4'>
       <Heading>
-        Debug <span className="text-sm">{service.version}</span>
+        Debug <span className='text-sm'>{service.version}</span>
       </Heading>
 
       {!detectors ? (
@@ -44,8 +44,8 @@ export default function Debug() {
         </div>
       ) : (
         <Fragment>
-          <div data-testid="detectors" className="min-w-0 overflow-auto">
-            <Table className="w-full">
+          <div data-testid='detectors' className='min-w-0 overflow-auto'>
+            <Table className='w-full'>
               <Thead>
                 <Tr>
                   <Th>detector</Th>
@@ -67,8 +67,8 @@ export default function Debug() {
             </Table>
           </div>
 
-          <div data-testid="cameras" className="min-w-0 overflow-auto">
-            <Table className="w-full">
+          <div data-testid='cameras' className='min-w-0 overflow-auto'>
+            <Table className='w-full'>
               <Thead>
                 <Tr>
                   <Th>camera</Th>
@@ -96,12 +96,12 @@ export default function Debug() {
         </Fragment>
       )}
 
-      <div className="relative">
-        <Heading size="sm">Config</Heading>
-        <Button className="absolute top-8 right-4" onClick={handleCopyConfig}>
+      <div className='relative'>
+        <Heading size='sm'>Config</Heading>
+        <Button className='absolute top-8 right-4' onClick={handleCopyConfig}>
           Copy to Clipboard
         </Button>
-        <pre className="overflow-auto font-mono text-gray-900 dark:text-gray-100 rounded bg-gray-100 dark:bg-gray-800 p-2 max-h-96">
+        <pre className='overflow-auto font-mono text-gray-900 dark:text-gray-100 rounded bg-gray-100 dark:bg-gray-800 p-2 max-h-96'>
           {JSON.stringify(config, null, 2)}
         </pre>
       </div>

web/src/routes/Events/index.jsx

@@ -81,11 +81,11 @@ export default function Events({ path: pathname, limit = API_LIMIT } = {}) {
     [apiHost, handleFilter, pathname, scrollToRef]
   );
   return (
-    <div className="space-y-4 w-full">
+    <div className='space-y-4 p-2 px-4 w-full'>
       <Heading>Events</Heading>
       <Filters onChange={handleFilter} searchParams={searchParams} />
-      <div className="min-w-0 overflow-auto">
-        <Table className="min-w-full table-fixed">
+      <div className='min-w-0 overflow-auto'>
+        <Table className='min-w-full table-fixed'>
           <TableHead />
 
           {events.map((props, idx) => {
@@ -95,7 +95,7 @@ export default function Events({ path: pathname, limit = API_LIMIT } = {}) {
 
           <Tfoot>
             <Tr>
-              <Td className="text-center p-4" colSpan="8">
+              <Td className='text-center p-4' colSpan='8'>
                 {status === FetchStatus.LOADING ? <ActivityIndicator /> : reachedEnd ? 'No more events' : null}
               </Td>
             </Tr>

web/src/routes/Recording.jsx

@@ -16,10 +16,10 @@ export default function Recording({ camera, date, hour, seconds }) {
 
   if (data.length === 0) {
     return (
-      <div className="space-y-4">
+      <div className='space-y-4'>
         <Heading>{camera} Recordings</Heading>
-        <div class="bg-yellow-100 border-l-4 border-yellow-500 text-yellow-700 p-4" role="alert">
-          <p class="font-bold">No Recordings Found</p>
+        <div class='bg-yellow-100 border-l-4 border-yellow-500 text-yellow-700 p-4' role='alert'>
+          <p class='font-bold'>No Recordings Found</p>
           <p>Make sure you have enabled the record role in your configuration for the {camera} camera.</p>
         </div>
       </div>
@@ -69,7 +69,7 @@ export default function Recording({ camera, date, hour, seconds }) {
   }
 
   return (
-    <div className="space-y-4">
+    <div className='space-y-4 p-2 px-4'>
       <Heading>{camera} Recordings</Heading>
 
       <VideoPlayer

web/src/routes/StyleGuide.jsx

@@ -25,47 +25,47 @@ export default function StyleGuide() {
   };
 
   return (
-    <div>
-      <Heading size="md">Button</Heading>
-      <div className="flex space-x-4 mb-4">
+    <div className='p-2 px-4'>
+      <Heading size='md'>Button</Heading>
+      <div className='flex space-x-4 mb-4'>
         <Button>Default</Button>
-        <Button color="red">Danger</Button>
-        <Button color="green">Save</Button>
-        <Button color="gray">Gray</Button>
+        <Button color='red'>Danger</Button>
+        <Button color='green'>Save</Button>
+        <Button color='gray'>Gray</Button>
         <Button disabled>Disabled</Button>
       </div>
-      <div className="flex space-x-4 mb-4">
-        <Button type="text">Default</Button>
-        <Button color="red" type="text">
+      <div className='flex space-x-4 mb-4'>
+        <Button type='text'>Default</Button>
+        <Button color='red' type='text'>
           Danger
         </Button>
-        <Button color="green" type="text">
+        <Button color='green' type='text'>
           Save
         </Button>
-        <Button color="gray" type="text">
+        <Button color='gray' type='text'>
           Gray
         </Button>
-        <Button disabled type="text">
+        <Button disabled type='text'>
           Disabled
         </Button>
       </div>
-      <div className="flex space-x-4 mb-4">
-        <Button type="outlined">Default</Button>
-        <Button color="red" type="outlined">
+      <div className='flex space-x-4 mb-4'>
+        <Button type='outlined'>Default</Button>
+        <Button color='red' type='outlined'>
           Danger
         </Button>
-        <Button color="green" type="outlined">
+        <Button color='green' type='outlined'>
           Save
         </Button>
-        <Button color="gray" type="outlined">
+        <Button color='gray' type='outlined'>
           Gray
         </Button>
-        <Button disabled type="outlined">
+        <Button disabled type='outlined'>
           Disabled
         </Button>
       </div>
 
-      <Heading size="md">Dialog</Heading>
+      <Heading size='md'>Dialog</Heading>
       <Button
         onClick={() => {
           setShowDialog(true);
@@ -76,8 +76,8 @@ export default function StyleGuide() {
       {showDialog ? (
         <Dialog
           onDismiss={handleDismissDialog}
-          title="This is a dialog"
-          text="Would you like to see more?"
+          title='This is a dialog'
+          text='Would you like to see more?'
           actions={[
             { text: 'Yes', color: 'red', onClick: handleDismissDialog },
             { text: 'No', onClick: handleDismissDialog },
@@ -85,41 +85,41 @@ export default function StyleGuide() {
         />
       ) : null}
 
-      <Heading size="md">Switch</Heading>
-      <div className="flex-col space-y-4 max-w-4xl">
-        <Switch label="Disabled, off" labelPosition="after" />
-        <Switch label="Disabled, on" labelPosition="after" checked />
+      <Heading size='md'>Switch</Heading>
+      <div className='flex-col space-y-4 max-w-4xl'>
+        <Switch label='Disabled, off' labelPosition='after' />
+        <Switch label='Disabled, on' labelPosition='after' checked />
         <Switch
-          label="Enabled, (off initial)"
-          labelPosition="after"
+          label='Enabled, (off initial)'
+          labelPosition='after'
           checked={switches[0]}
           id={0}
           onChange={handleSwitch}
         />
         <Switch
-          label="Enabled, (on initial)"
-          labelPosition="after"
+          label='Enabled, (on initial)'
+          labelPosition='after'
           checked={switches[1]}
           id={1}
           onChange={handleSwitch}
         />
 
-        <Switch checked={switches[2]} id={2} label="Label before" onChange={handleSwitch} />
-        <Switch checked={switches[3]} id={3} label="Label after" labelPosition="after" onChange={handleSwitch} />
+        <Switch checked={switches[2]} id={2} label='Label before' onChange={handleSwitch} />
+        <Switch checked={switches[3]} id={3} label='Label after' labelPosition='after' onChange={handleSwitch} />
       </div>
 
-      <Heading size="md">Select</Heading>
-      <div className="flex space-x-4 mb-4 max-w-4xl">
-        <Select label="Basic select box" options={['All', 'None', 'Other']} selected="None" />
+      <Heading size='md'>Select</Heading>
+      <div className='flex space-x-4 mb-4 max-w-4xl'>
+        <Select label='Basic select box' options={['All', 'None', 'Other']} selected='None' />
       </div>
 
-      <Heading size="md">TextField</Heading>
-      <div className="flex-col space-y-4 max-w-4xl">
-        <TextField label="Default text field" />
-        <TextField label="Pre-filled" value="This is my pre-filled value" />
-        <TextField label="With help" helpText="This is some help text" />
-        <TextField label="Leading icon" leadingIcon={ArrowDropdown} />
-        <TextField label="Trailing icon" trailingIcon={ArrowDropup} />
+      <Heading size='md'>TextField</Heading>
+      <div className='flex-col space-y-4 max-w-4xl'>
+        <TextField label='Default text field' />
+        <TextField label='Pre-filled' value='This is my pre-filled value' />
+        <TextField label='With help' helpText='This is some help text' />
+        <TextField label='Leading icon' leadingIcon={ArrowDropdown} />
+        <TextField label='Trailing icon' trailingIcon={ArrowDropup} />
       </div>
     </div>
   );