Bugzilla

Hrmm, it only does this when it's in responsive mode (a recent change I made with the last major pr). I'm really not sure why it does that and it might require a read up on svg's in order to come up with a good solution. Another option would be to use the `className` prop on the `VictoryBrushContainer` and `VictoryZoomContainer` and change it back to ```response={false}``` for both containers. You can then add media queries to change the fixed width based on the viewport. I think this might be the easiest solution - the tooltips are positioned as expected this way and will prevent the graphs from wrapping onto the next row (with scroll bars when the viewport gets smaller).

```
@media only screen and (min-width: 1200px) {
  .graphs-test svg {
    max-width: 900px;
  }
  .graphs-test {
    width: 900px !important;
  }
}

@media only screen and (min-width: 1700px) {
  .graphs-test svg {
    max-width: 1350px;
  }
  .graphs-test {
    width: 1350px !important;
  }
}
```

I'd go as far as supporting laptop size. You can see how bootstrap supports it here: https://getbootstrap.com/docs/4.3/layout/overview/

Hrmm, it only does this when it's in responsive mode (a recent change I made with the last major pr). I'm really not sure why it does that and it might require a read up on svg's in order to come up with a good solution. Another option would be to use the `className` prop on the `VictoryBrushContainer` and `VictoryZoomContainer` and change it back to ```response={false}``` for both containers. You can then add media queries in the perf stylesheet to change the fixed width based on the viewport. I think this might be the easiest solution - the tooltips are positioned as expected this way and will prevent the graphs from wrapping onto the next row (with scroll bars when the viewport gets smaller).

```
@media only screen and (min-width: 1200px) {
  .graphs-test svg {
    max-width: 900px;
  }
  .graphs-test {
    width: 900px !important;
  }
}

@media only screen and (min-width: 1700px) {
  .graphs-test svg {
    max-width: 1350px;
  }
  .graphs-test {
    width: 1350px !important;
  }
}
```

I'd go as far as supporting laptop size. You can see how bootstrap supports it here: https://getbootstrap.com/docs/4.3/layout/overview/

Hrmm, it only does this when it's in responsive mode (a recent change I made with the last major pr). I'm really not sure why it does that and it might require a read up on svg's in order to come up with a good solution. Another option would be to use the `className` prop on the `VictoryBrushContainer` and `VictoryZoomContainer` and change it back to ```response={false}``` for both containers. You can then add media queries in the perf stylesheet to change the fixed width based on the viewport. I think this might be the easiest solution - the tooltips are positioned as expected this way and will prevent the graphs from wrapping onto the next row (with scroll bars when the viewport gets smaller).

As an example:
```
@media only screen and (min-width: 1200px) {
  .graph-container svg {
    max-width: 900px;
  }
  .graph-container {
    width: 900px !important;
  }
}

@media only screen and (min-width: 1700px) {
  .graph-container svg {
    max-width: 1350px;
  }
  .graph-container {
    width: 1350px !important;
  }
}
```

I'd go as far as supporting laptop size. You can see how bootstrap supports it here: https://getbootstrap.com/docs/4.3/layout/overview/

Hrmm, it only does this when it's in responsive mode (a recent change I made with the last major pr). I'm really not sure why it does that and it might require a read up on svg's in order to come up with a good solution. Another option would be to use the `className` prop on the `VictoryBrushContainer` and `VictoryZoomContainer` and change it back to ```response={false}``` for both containers. You can then add media queries in the perf stylesheet to change the fixed width based on the viewport. I think this might be the easiest solution - the tooltips are positioned as expected this way and will prevent the graphs from wrapping onto the next row (with scroll bars when the viewport gets smaller).

As an example:
```
@media only screen and (min-width: 1200px) {
  .graph-container svg {
    max-width: 900px;
  }
  .graph-container {
    width: 900px !important;
  }
}

@media only screen and (min-width: 1700px) {
  .graph-container svg {
    max-width: 1350px;
  }
  .graph-container {
    width: 1350px !important;
  }
}
```

I'd go as far as supporting laptop size and can add additional breaks/customize it as desired. You can see how bootstrap supports it here: https://getbootstrap.com/docs/4.3/layout/overview/

Hrmm, it only does this when it's in responsive mode (a recent change I made with the last major pr). I'm really not sure why it does that and it might require a read up on svg's in order to come up with a good solution. Another option would be to use the `className` prop on the `VictoryBrushContainer` and `VictoryZoomContainer` and change it back to ```response={false}``` for both containers. You can then add media queries in the perf stylesheet to change the fixed width based on the viewport. I think this might be the easiest solution - the tooltips are positioned as expected this way and will prevent the graphs from wrapping onto the next row (with scroll bars when the viewport gets smaller).

As an example:
```
@media only screen and (min-width: 1200px) {
  .graph-container svg {
    max-width: 900px;
  }
  .graph-container {
    width: 900px !important;
  }
}

@media only screen and (min-width: 1700px) {
  .graph-container svg {
    max-width: 1350px;
  }
  .graph-container {
    width: 1350px !important;
  }
}
```

I'd go as far as supporting laptop size and you can add additional breaks/customize it as desired. You can see how bootstrap supports it here: https://getbootstrap.com/docs/4.3/layout/overview/