7 changed files with 71 additions and 158 deletions
--- a/src/App.tsx
+++ b/src/App.tsx
@ -4,7 +4,6 @@ import { invoke } from '@tauri-apps/api/tauri';
 import './App.css';
 import { Configurator } from './configurator/configurator';
 import { ButtonSwitch } from './commons/components/button';
-import { fillParentCss } from './styles/fill-parent';

 type Mode = 'Flowing' | 'Follow' | null;

@ -41,7 +40,7 @@ function App() {
  );

  return (
-    <div css={[fillParentCss]} tw="box-border flex flex-col">
+    <div>
      <div tw="flex justify-between">
        {ledStripColors.map((it) => (
          <span tw="h-8 flex-auto" style={{ backgroundColor: it }}></span>
@ -56,7 +55,7 @@ function App() {
        ))}
      </div>

-      <div tw="flex gap-5 justify-center">
+      <div tw="flex gap-5 justify-center ">
        <ButtonSwitch onClick={() => takeSnapshot()}>Take Snapshot</ButtonSwitch>
        <ButtonSwitch onClick={() => getLedStripColors()}>Get Colors</ButtonSwitch>
        <ButtonSwitch onClick={() => switchCurrentMode('Flowing')}>
@ -65,7 +64,7 @@ function App() {
        <ButtonSwitch onClick={() => switchCurrentMode('Follow')}>Follow</ButtonSwitch>
      </div>

-      <div css={[fillParentCss]}>
+      <div tw="flex gap-5 justify-center">
        <Configurator />
      </div>
    </div>
--- a/src/configurator/components/completed-container.tsx
+++ b/src/configurator/components/completed-container.tsx
@ -1,62 +0,0 @@
-import { isNil } from 'ramda';
-import { FC, Fragment, useMemo } from 'react';
-import tw, { css, styled } from 'twin.macro';
-import { useLedCount } from '../contents/led-count';
-import { PixelRgb } from '../models/pixel-rgb';
-import { StyledPixel } from './styled-pixel';
-import { BorderLedStrip } from './completed-led-strip';
-
-const StyledCompletedContainerBorder = styled.section(
-  tw`dark:shadow-xl border-gray-600 bg-black border rounded-full flex flex-nowrap justify-around items-center p-px h-3 mb-1`,
-  css`
-    grid-column: 1 / -1;
-    grid-row: 1 / span 1;
-    justify-self: stretch;
-  `,
-);
-interface StyledCompletedContainerProps {
-  borderLedStrips: BorderLedStrip[];
-  overrideBorderLedStrips?: BorderLedStrip[];
-}
-export const CompletedContainer: FC<StyledCompletedContainerProps> = ({
-  borderLedStrips,
-  overrideBorderLedStrips,
-}) => {
-  const { ledCount } = useLedCount();
-  const completedPixels = useMemo(() => {
-    const completed: PixelRgb[] = new Array(ledCount).fill([0, 0, 0]);
-    (overrideBorderLedStrips ?? borderLedStrips).forEach(({ pixels, config }) => {
-      if (isNil(config)) {
-        return;
-      }
-      if (config.global_start_position <= config.global_end_position) {
-        pixels.forEach((color, i) => {
-          completed[config.global_start_position + i] = color;
-        });
-      } else {
-        pixels.forEach((color, i) => {
-          completed[config.global_start_position - i] = color;
-        });
-      }
-    });
-
-    return completed.map((color, i) => (
-      <StyledPixel
-        rgb={color}
-        key={i}
-        css={css`
-          grid-row-start: 1;
-          grid-column-start: ${i + 1};
-          align-self: flex-start;
-        `}
-      />
-    ));
-  }, [ledCount, borderLedStrips, overrideBorderLedStrips]);
-
-  return (
-    <Fragment>
-      <StyledCompletedContainerBorder />
-      {completedPixels}
-    </Fragment>
-  );
-};
--- a/src/configurator/components/completed-led-strip.tsx
+++ b/src/configurator/components/completed-led-strip.tsx
@ -1,5 +1,5 @@
 import debug from 'debug';
-import { lensPath, set, splitEvery, update } from 'ramda';
+import { isNil, lensPath, set, splitEvery, update } from 'ramda';
 import { FC, useEffect, useMemo, useState } from 'react';
 import tw, { css, styled } from 'twin.macro';
 import { Borders, borders } from '../../constants/border';
@ -8,8 +8,8 @@ import { DisplayConfig, LedStripConfigOfBorders } from '../models/display-config
 import { LedStripConfig } from '../models/led-strip-config';
 import { PixelRgb } from '../models/pixel-rgb';
 import { ScreenshotDto } from '../models/screenshot.dto';
-import { CompletedContainer } from './completed-container';
 import { DraggableStrip } from './draggable-strip';
+import { StyledPixel } from './styled-pixel';

 export const logger = debug('app:completed-led-strip');

@ -18,7 +18,7 @@ interface CompletedLedStripProps {
  onDisplayConfigChange?: (value: DisplayConfig) => void;
 }

-export type BorderLedStrip = {
+type BorderLedStrip = {
  pixels: PixelRgb[];
  config: LedStripConfig | null;
 };
@ -26,13 +26,20 @@ export type BorderLedStrip = {
 const StyledContainer = styled.section(
  ({ rows, columns }: { rows: number; columns: number }) => [
    tw`grid m-4 pb-2 items-center justify-items-center select-none`,
-    tw`overflow-x-auto overflow-y-hidden flex-none`,
    css`
-      grid-template-columns: repeat(${columns}, 0.5em);
-      grid-template-rows: auto repeat(${rows}, 0.5em);
+      grid-template-columns: repeat(${columns}, 1fr);
+      grid-template-rows: auto repeat(${rows}, 1fr);
    `,
  ],
 );
+const StyledCompletedContainer = styled.section(
+  tw`dark:bg-transparent shadow-xl border-gray-500 border rounded-full flex flex-wrap justify-around items-center mb-2`,
+  css`
+    grid-column: 1 / -1;
+    justify-self: stretch;
+  `,
+);
+
 export const CompletedLedStrip: FC<CompletedLedStripProps> = ({
  screenshots,
  onDisplayConfigChange,
@ -49,18 +56,6 @@ export const CompletedLedStrip: FC<CompletedLedStripProps> = ({
    () => borderLedStrips.reduce((prev, curr) => prev + curr.pixels.length, 0),
    [borderLedStrips],
  );
-  const maxIndex = useMemo(
-    () =>
-      Math.max(
-        ...borderLedStrips
-          .map((s) => [
-            s.config?.global_end_position ?? 0,
-            s.config?.global_start_position ?? 0,
-          ])
-          .flat(),
-      ),
-    [borderLedStrips],
-  );

  const { setLedCount } = useLedCount();
  // setLedCount for context
@ -71,6 +66,26 @@ export const CompletedLedStrip: FC<CompletedLedStripProps> = ({
  const [overrideBorderLedStrips, setOverrideBorderLedStrips] =
    useState<BorderLedStrip[]>();

+  const completedPixels = useMemo(() => {
+    const completed: PixelRgb[] = new Array(ledCount).fill([0, 0, 0]);
+    (overrideBorderLedStrips ?? borderLedStrips).forEach(({ pixels, config }) => {
+      if (isNil(config)) {
+        return;
+      }
+      if (config.global_start_position <= config.global_end_position) {
+        pixels.forEach((color, i) => {
+          completed[config.global_start_position + i] = color;
+        });
+      } else {
+        pixels.forEach((color, i) => {
+          completed[config.global_start_position - i] = color;
+        });
+      }
+    });
+
+    return completed.map((color, i) => <StyledPixel rgb={color} key={i} />);
+  }, [ledCount, borderLedStrips, overrideBorderLedStrips]);
+
  const strips = useMemo(() => {
    return borderLedStrips.map(({ config, pixels }, index) =>
      config ? (
@ -108,12 +123,11 @@ export const CompletedLedStrip: FC<CompletedLedStripProps> = ({
    setOverrideBorderLedStrips(undefined);
  }, [borderLedStrips]);
  return (
-    <StyledContainer rows={screenshots.length * borders.length} columns={maxIndex + 1}>
-      <CompletedContainer
-        borderLedStrips={borderLedStrips}
-        overrideBorderLedStrips={overrideBorderLedStrips}
-      />
+    <StyledContainer rows={screenshots.length * borders.length} columns={ledCount}>
+      <StyledCompletedContainer>{completedPixels}</StyledCompletedContainer>
      {strips}
    </StyledContainer>
  );
 };
+
+
--- a/src/configurator/components/led-strip-editor.tsx
+++ b/src/configurator/components/led-strip-editor.tsx
@ -1,4 +1,4 @@
-import { HTMLAttributes, MouseEventHandler, useCallback } from 'react';
+import { HTMLAttributes, useCallback } from 'react';
 import { FC } from 'react';
 import { LedStripConfig } from '../models/led-strip-config';
 import tw, { styled } from 'twin.macro';
@ -26,54 +26,36 @@ export const LedStripEditor: FC<LedStripEditorProps> = ({
  onChange,
  ...htmlAttrs
 }) => {
-  const addLed: MouseEventHandler = useCallback(
-    (ev) => {
-      ev.preventDefault();
-      const delta = ev.button === 2 ? 10 : 1;
+  const addLed = useCallback(() => {
    if (config) {
      if (config.global_start_position <= config.global_end_position) {
-          onChange?.({
-            ...config,
-            global_end_position: config.global_end_position + delta,
-          });
+        onChange?.({ ...config, global_end_position: config.global_end_position + 1 });
      } else {
        onChange?.({
          ...config,
-            global_start_position: config.global_start_position + delta,
+          global_start_position: config.global_start_position + 1,
        });
      }
    } else {
      onChange?.(new LedStripConfig(0, 0, 0));
    }
-    },
-    [config, onChange],
-  );
-  const removeLed: MouseEventHandler = useCallback(
-    (ev) => {
-      ev.preventDefault();
-      const delta = ev.button === 2 ? 10 : 1;
+  }, [config, onChange]);
+  const removeLed = useCallback(() => {
    if (!config) {
      onChange?.(null);
-      } else if (
-        Math.abs(config.global_start_position - config.global_end_position) <= delta
-      ) {
+    } else if (Math.abs(config.global_start_position - config.global_end_position) <= 1) {
      onChange?.(null);
    } else {
      if (config.global_start_position <= config.global_end_position) {
-          onChange?.({
-            ...config,
-            global_end_position: config.global_end_position - delta,
-          });
+        onChange?.({ ...config, global_end_position: config.global_end_position - 1 });
      } else {
        onChange?.({
          ...config,
-            global_start_position: config.global_start_position - delta,
+          global_start_position: config.global_start_position - 1,
        });
      }
    }
-    },
-    [config, onChange],
-  );
+  }, [config, onChange]);
  const reverse = useCallback(() => {
    if (!config) {
      return;
@ -87,10 +69,10 @@ export const LedStripEditor: FC<LedStripEditorProps> = ({

  return (
    <StyledContainer {...htmlAttrs}>
-      <StyledButton title="Add LED" onClick={addLed} onContextMenu={addLed}>
+      <StyledButton title="Add LED" onClick={addLed}>
        <FontAwesomeIcon icon={faPlus} />
      </StyledButton>
-      <StyledButton title="Remove LED" onClick={removeLed} onContextMenu={removeLed}>
+      <StyledButton title="Remove LED" onClick={removeLed}>
        <FontAwesomeIcon icon={faMinus} />
      </StyledButton>
      <StyledButton title="Reverse" onClick={reverse}>
--- a/src/configurator/configurator.tsx
+++ b/src/configurator/configurator.tsx
@ -14,7 +14,6 @@ import { CompletedLedStrip } from './components/completed-led-strip';
 import { LedCountProvider } from './contents/led-count';
 import debug from 'debug';
 import { useSnackbar } from 'notistack';
-import { fillParentCss } from '../styles/fill-parent';

 const logger = debug('app:configurator');

@ -34,8 +33,7 @@ const writePickerConfig = async (config: PickerConfiguration) => {
  });
 };
 const StyledConfiguratorContainer = styled.section(
-  tw`flex flex-col items-stretch relative overflow-hidden`,
-  fillParentCss,
+  tw`flex flex-col items-stretch relative`,
 );

 const StyledDisplayContainer = styled.section(tw`overflow-auto`);
@ -119,7 +117,7 @@ const ConfiguratorInner: FC = () => {
        screenshots={screenshotOfDisplays}
        onDisplayConfigChange={onDisplayConfigChange}
      />
-      <StyledDisplayContainer tw="overflow-y-auto">{displays}</StyledDisplayContainer>
+      <StyledDisplayContainer>{displays}</StyledDisplayContainer>
      <Fab
        aria-label="reset"
        size="small"
--- a/src/styles/fill-parent.ts
+++ b/src/styles/fill-parent.ts
@ -1,3 +0,0 @@
-import tw from 'twin.macro';
-
-export const fillParentCss = tw`w-full h-full overflow-hidden`;
--- a/src/styles/global-styles.tsx
+++ b/src/styles/global-styles.tsx
@ -1,28 +1,13 @@
 import React from 'react';
 import { Global, css } from '@emotion/react';
 import tw, { theme, GlobalStyles as BaseStyles } from 'twin.macro';
-import { fillParentCss } from './fill-parent';

 const customStyles = css({
  body: {
    WebkitTapHighlightColor: theme`colors.purple.500`,
    ...tw`antialiased`,
    ...tw`dark:bg-dark-800 bg-dark-100 dark:text-gray-100 text-gray-800`,
-    ...fillParentCss,
  },
-  html: {
-    ...fillParentCss,
-  },
-  '#root': {
-    ...fillParentCss,
-  },
-  '::-webkit-scrollbar': tw`w-1.5 h-1.5`,
-  '::-webkit-scrollbar-button': tw`hidden`,
-  '::-webkit-scrollbar-track': tw`bg-transparent`,
-  '::-webkit-scrollbar-track-piece': tw`bg-transparent`,
-  '::-webkit-scrollbar-thumb': tw`bg-gray-300 dark:(bg-gray-700/50 hover:bg-gray-700/90 active:bg-gray-700/100) transition-colors rounded-full`,
-  '::-webkit-scrollbar-corner': tw`bg-gray-600`,
-  '::-webkit-resizer': tw`hidden`,
 });

 const GlobalStyles = () => (