Heading formatting and cell edit issues with production build

[paladin0]

Production build using latest version results in the below
Development build appears to be correct

This docker build works for dev with no issues
FROM node:20-alpine3.19
ENV NODE_OPTIONS=--openssl-legacy-provider

add app

COPY --chown=1001:1001 app app

RUN addgroup -S -g 1001 python
RUN adduser -D -S -G python -u 1001 python

WORKDIR /app
COPY ./app/package.json /app
RUN apk add git

RUN mkdir -p /home/react && chown -R 1001:1001 /home/react
RUN yarn add react-app-rewired
RUN yarn add stream-browserify
RUN yarn add buffer
RUN yarn add react-clear-browser-cache
RUN npm install -g serve
RUN node ./node_modules/react-clear-browser-cache/bin/cli.js
RUN yarn install
ENV NODE_OPTIONS="--max_old_space_size=4096 --openssl-legacy-provider"

start app

USER 1001:1001
CMD ["yarn", "run", "start"]

========================================================
this then results in the above images
FROM node:20-alpine3.19
ENV NODE_OPTIONS=--openssl-legacy-provider

add app

COPY --chown=1001:1001 app app

RUN addgroup -S -g 1001 python
RUN adduser -D -S -G python -u 1001 python

WORKDIR app
RUN apk add git

RUN mkdir -p /home/react && chown -R 1001:1001 /home/react
RUN yarn add react-app-rewired
RUN yarn add stream-browserify
RUN yarn add buffer
RUN yarn add react-clear-browser-cache
RUN npm install -g serve
RUN node ./node_modules/react-clear-browser-cache/bin/cli.js
RUN yarn install
RUN yarn build

start app

USER 1001:1001
CMD ["serve", "-s", "build"]

[paladin0]

I should also add the following
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
)

and

"react-data-grid": "^7.0.0-beta.47",

[amanmahajan7]

Is the css bundled correctly? We are using css layers

[mikhael28]

I have the same issue, it only seems to affect the prod bundles that are generated - I'm using Next 14.2.x

My temporary fix is to update the styles.css in the npm module to comment out the inline-block: 10px in the code block below.

.r1y6ywlx7-0-0-beta-46 {
@layer rdg.HeaderCell {
cursor: col-resize;
position: absolute;
inset-block-start: 0;
/* inset-inline-end: 0;
inset-block-end: 0;
inline-size: 10px; */
}
}

This breaks width: max-content but at least my data table works in prod. @amanmahajan7 @paladin0

[paladin0]

@amanmahajan7 The above fix seems to work, but due to the way our live builds work we docker container everything and its fully rebuilt with each update, so i cant use that long term

Any ideas on how i can fix it as its killed most grids in our app

[amanmahajan7]

Seems related #3460

[mikhael28]

@paladin0 I would just take those styles, and copy them out of the node module and into a separate file that you import locally, to use them directly. Fixes the problem, no?