From 54ffa590eefdeda8c8f5c073effe1cf9ae9160db Mon Sep 17 00:00:00 2001
From: Yuki Yokotani <yokotani.yuki@gmail.com>
Date: Sun, 21 Mar 2021 21:55:40 +0900
Subject: [PATCH] =?UTF-8?q?issue=20#2=20=E3=82=A2=E3=82=A4=E3=83=86?=
 =?UTF-8?q?=E3=83=A0=E5=89=8A=E9=99=A4=E3=81=AE=E3=83=90=E3=82=B0=E4=BF=AE?=
 =?UTF-8?q?=E6=AD=A3=E3=80=81=E5=9B=BA=E5=AE=9A=E3=83=AC=E3=82=A4=E3=82=A2?=
 =?UTF-8?q?=E3=82=A6=E3=83=88=E3=81=AB=E5=A4=89=E6=9B=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/component/Contents.tsx               | 20 ++++++++++++++++++--
 src/features/condition/conditionSlice.ts |  8 ++++++--
 src/features/dpTable/DpTable.tsx         | 20 +++++++-------------
 src/utils/theme.ts                       |  2 +-
 4 files changed, 32 insertions(+), 18 deletions(-)

diff --git a/src/component/Contents.tsx b/src/component/Contents.tsx
index e5ce0c3..c4c00a0 100644
--- a/src/component/Contents.tsx
+++ b/src/component/Contents.tsx
@@ -1,13 +1,29 @@
-import { Container, Grid } from '@material-ui/core';
+import {
+  Container,
+  createStyles,
+  Grid,
+  makeStyles,
+  Theme,
+} from '@material-ui/core';
 import React from 'react';
 import Knapsack from '../features/condition/Knapsack';
 import Form from '../features/condition/Form';
 import Evaluation from '../features/condition/Evaluation';
 import DpTable from '../features/dpTable/DpTable';
 
+const useStyles = makeStyles(() =>
+  createStyles({
+    root: {
+      minWidth: '960px',
+      overflow: 'auto',
+    },
+  })
+);
 const Contents: React.FC = () => {
+  const classes = useStyles();
+
   return (
-    <Container maxWidth="md">
+    <Container maxWidth="md" className={classes.root}>
       <Grid container spacing={3}>
         <Grid item xl={12} xs={12}>
           <Knapsack />
diff --git a/src/features/condition/conditionSlice.ts b/src/features/condition/conditionSlice.ts
index c3258bb..bc7667f 100644
--- a/src/features/condition/conditionSlice.ts
+++ b/src/features/condition/conditionSlice.ts
@@ -31,8 +31,12 @@ const conditionSlice = createSlice({
       state.items.push(action.payload);
     },
     delItem: (state, action: PayloadAction<Item>) => {
-      const index = state.items.indexOf(action.payload);
-      state.items.splice(index, 1);
+      const index = state.items.findIndex(
+        (item) => item.id === action.payload.id
+      );
+      if (index !== -1) {
+        state.items.splice(index, 1);
+      }
     },
     setProcessed: (
       state,
diff --git a/src/features/dpTable/DpTable.tsx b/src/features/dpTable/DpTable.tsx
index e537e4c..4d25de4 100644
--- a/src/features/dpTable/DpTable.tsx
+++ b/src/features/dpTable/DpTable.tsx
@@ -35,25 +35,18 @@ const useStyles = makeStyles((theme: Theme) =>
       height: '50px',
     },
     thIndex: {
-      width: '200px',
+      width: '28.5%',
+      maxWidth: '300px',
       overflow: 'auto',
-      [theme.breakpoints.down('sm')]: {
-        width: '100px',
-      },
     },
     thColumn: {
       height: '50px',
-      width: 'calc((100% - 200px)/11)',
-      minWidth: 'calc((100% - 200px)/11)',
-      maxWidth: 'calc((100% - 200px)/11)',
-      [theme.breakpoints.down('sm')]: {
-        width: 'calc((100% - 100px)/11)',
-        minWidth: 'calc((100% - 100px)/11)',
-        maxWidth: 'calc((100% - 100px)/11)',
-      },
+      width: '6.5%',
+      minWidth: '6.5%',
+      maxWidth: '6.5%',
     },
     tableLabel: {
-      marginLeft: 'calc(200px + (50% - 200px))',
+      marginLeft: '50%',
     },
     emptyChip: {
       paddingLeft: '2.5rem',
@@ -352,6 +345,7 @@ const DpTable: React.FC = () => {
     [
       classes.emptyChip,
       classes.itemChip,
+      classes.thIndex,
       classes.trData,
       condition.eval,
       handleDelete,
diff --git a/src/utils/theme.ts b/src/utils/theme.ts
index ffc7d0b..d8d2c9d 100644
--- a/src/utils/theme.ts
+++ b/src/utils/theme.ts
@@ -18,7 +18,7 @@ const baseConfig: ThemeOptions = {
   breakpoints: {
     values: {
       xs: 0,
-      sm: 660,
+      sm: 640,
       md: 960,
       lg: 1280,
       xl: 1920,