kthcloud / console

kthcloud web console
https://cloud.cbh.kth.se
MIT License
3 stars 3 forks source link

Add whiteSpace nowrap to x-scrollable tables #298

Closed pierrelefevre closed 4 weeks ago

pierrelefevre commented 1 month ago

Screenshot_20240601-233451.png

Doesn't make sense for the text to wrap on mobile and make everything super weird and ugly since the entire table container is x-scrollable as per material ui guidelines

Phillezi commented 1 month ago

I created a tiny component NoWrapTable.tsx that just wraps Table with whiteSpace: "nowrap" in components:

import { Table, styled } from "@mui/material";

const NoWrapTable = styled(Table)({
  whiteSpace: "nowrap",
});

export default NoWrapTable;

Here's how it looks on the GPU types table image

Should nowrap be used on all x-scrollable tables? image

Phillezi commented 1 month ago

StorageManager.tsx might be better off with text wrapping, With long storage paths is seems tedious to scroll, or what do you think is best? image image