react-diff-viewer icon indicating copy to clipboard operation
react-diff-viewer copied to clipboard

How to change line-height?

Open AshtonScalise opened this issue 1 year ago • 2 comments

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 */
}

AshtonScalise avatar Nov 18 '24 06:11 AshtonScalise

Okay after sleeping on it, realized I could just apply transform scale to the container

AshtonScalise avatar Nov 18 '24 17:11 AshtonScalise

    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;

zystudios avatar Dec 04 '24 09:12 zystudios