When dragging and dropping the component to table row column the table width shivers if width is less (may be the reason)

Question

When I drag and drop the shift in table row and if table width is less and there are more shift for particular day the table shivers , not allowing the user to efficiently drop the shift. What change should I do in below code.

<DragDropContext onDragEnd={onDragEnd}>
                        <ShiftsCreate />
                        <div className="filter-container">
                            <div className="datagrid-common-style">
                                <div className="title">
                                    <h4>Shifts</h4>
                                    <div className="filters">
                                        <input
                                            type="search"
                                            value={searchTerm}
                                            onChange={(e) => dispatch(setSearchTerm(e.target.value))}
                                            className="search"
                                            placeholder="Search Here.."
                                        />
                                    </div>
                                </div>
                                <ShiftsTable />
                            </div>
                        </div>
                    </DragDropContext>

<Droppable droppableId={`${employeeID}-${field}`} direction="horizontal">
                {(provided: any) => (
                    <div {...provided.droppableProps} ref={provided.innerRef} className="shift-drag-cell">
                        {shifts &&
                            Array.isArray(shifts) &&
                            shifts.map((shift, idx) => (
                                <>
                                    {shift[field] ? (
                                        <Draggable
                                            key={`${employeeID}-${field}-${shift["shiftTemplateID"]}`}
                                            draggableId={`${employeeID}-${field}-${shift["shiftTemplateID"]}`}
                                            isDragDisabled={!userWritePermission}
                                            index={idx}>
                                            {(provided) => (
                                                <div ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps}>
                                                    <div key={shift["shiftTemplateID"]} className="column-drag-cell">
                                                        <h5
                                                            style={{
                                                                color: getShiftData(shift["shiftTemplateID"])?.color,
                                                                whiteSpace: "nowrap",
                                                            }}>
                                                            {getShiftData(shift["shiftTemplateID"])?.name}
                                                        </h5>
                                                        <ClearIcon
                                                            id={`${employeeID}-${field}-${shift["shiftTemplateID"]}`}
                                                            onClick={(e) => {
                                                                if (userWritePermission) {
                                                                    removeShift(e);
                                                                }
                                                            }}
                                                            sx={{ fontSize: "14px", cursor: "pointer" }}
                                                        />
                                                    </div>
                                                </div>
                                            )}
                                        </Draggable>
                                    ) : null}
                                </>
                            ))}
                    </div>
                )}
            </Droppable>

I tried searching for an answer on documents but could not get.