react-diff-viewer
react-diff-viewer copied to clipboard
How to change line-height?
Throwing a lot of chatgpt's suggestions, can't seem to actually get the amount of tr's I get on my screen (always 40) even when i change all these values, basically I just want an extremely compact view
const newStyles = {
diffContainer: {
height: "auto",
maxHeight: "none",
overflowY: "auto",
},
line: {
padding: "0 !important",
margin: "0 !important",
fontSize: "8px !important",
lineHeight: "8px !important", // Explicit line height
height: "8px !important", // Force height per row
},
contentText: {
fontSize: "8px !important",
lineHeight: "8px !important",
padding: "0 !important",
margin: "0 !important",
},
gutter: {
fontSize: "8px !important",
padding: "0 !important",
margin: "0 !important",
},
};
.react-diff-viewer tr {
line-height: 8px !important; /* Explicit line height matching font size */
padding: 0 !important; /* Remove all internal padding */
}
.react-diff-viewer td {
padding: 0 !important; /* Ensure no padding inside table data */
height: 8px !important; /* Match height to font size */
margin: 0 !important; /* Remove extra margin */
}
Okay after sleeping on it, realized I could just apply transform scale to the container
height: 10px;
overflow: hidden;
display: block; // change display
@AshtonScalise TR can not directly set the height, this is a form property decision, you can change the tr display, like: display: block;