Reponse details to not take column width

[mykolasmolis]

Q&A (please complete the following information)

• OS: Windows 10
• Browser: Chrome
• Version: 75.0.3770.142
• Method of installation: npm
• Swagger-UI version: 3.22.3
• Swagger/OpenAPI version: OpenAPI 3.0

Content & configuration

Example Swagger/OpenAPI definition:

openapi: "3.0.0"
info:
  version: 1.0.0
  title: Swagger Petstore
  license:
    name: MIT
servers:
  - url: http://petstore.swagger.io/v1
paths:
  /pets:
    get:
      summary: List all pets
      operationId: listPets
      tags:
        - pets
      parameters:
        - name: limit
          in: query
          description: How many items to return at one time (max 100)
          required: false
          schema:
            type: integer
            format: int32
      responses:
        '200':
          description: A paged array of pets
          headers:
            x-next:
              description: A link to the next page of responses
              schema:
                type: string
          content:
            application/json:    
              schema:
                $ref: "#/components/schemas/Pets"
        default:
          description: unexpected error
          content:
            application/json:
              schema:
                $ref: "#/components/schemas/Error"
    post:
      summary: Create a pet
      operationId: createPets
      tags:
        - pets
      responses:
        '201':
          description: Null response
        default:
          description: unexpected error
          content:
            application/json:
              schema:
                $ref: "#/components/schemas/Error"
  /pets/{petId}:
    get:
      summary: Info for a specific pet
      operationId: showPetById
      tags:
        - pets
      parameters:
        - name: petId
          in: path
          required: true
          description: The id of the pet to retrieve
          schema:
            type: string
      responses:
        '200':
          description: Expected response to a valid request
          content:
            application/json:
              schema:
                $ref: "#/components/schemas/Pet"
        default:
          description: unexpected error
          content:
            application/json:
              schema:
                $ref: "#/components/schemas/Error"
components:
  schemas:
    Pet:
      required:
        - id
        - name
      properties:
        id:
          type: integer
          format: int64
        name:
          type: string
        tag:
          type: string
    Pets:
      type: array
      items:
        $ref: "#/components/schemas/Pet"
    Error:
      required:
        - code
        - message
      properties:
        code:
          type: integer
          format: int32
        message:
          type: string

Swagger-UI configuration options:

import React from "react";
import PropTypes from "prop-types";
import SwaggerUI from "swagger-ui-react";
import "swagger-ui-react/swagger-ui.css";

import apis from "../config/apis";

const Api = ({ match }) => {
  const api = apis.find(a => a.id === match.params.apiId);
  return <SwaggerUI url={api && api.oasUrl} />;
};

Api.propTypes = {
  match: PropTypes.shape({
    params: PropTypes.shape({
      apiId: PropTypes.string.isRequired
    }).isRequired
  }).isRequired
};

export default Api;

import React from "react";
import { Navbar, Nav, NavDropdown } from "react-bootstrap";
import { BrowserRouter, Route } from "react-router-dom";
import Api from "./pages/Api";
import "./App.css";

import apis from "./config/apis";

export default () => (
  <BrowserRouter basename="/api-documentation-app">
    <Navbar bg="pp-dark" expand="lg" variant="dark">
      <Navbar.Brand href="/api-documentation-app">
        API Documentation
      </Navbar.Brand>
      <Navbar.Toggle aria-controls="basic-navbar-nav" />
      <Navbar.Collapse id="basic-navbar-nav">
        <Nav className="mr-auto">
          <NavDropdown title="API" id="basic-nav-dropdown">
            {apis.map(api => (
              <NavDropdown.Item
                key={api.id}
                href={`/api-documentation-app/api/${api.id}`}
              >
                {api.name}
              </NavDropdown.Item>
            ))}
          </NavDropdown>
        </Nav>
      </Navbar.Collapse>
    </Navbar>
    <Route path="/api/:apiId" exact component={Api} />
  </BrowserRouter>
);

Describe the bug you're encountering

When I open API and try a method the response is displayed in very narrow column:

To reproduce...

Steps to reproduce the behavior:

1. Go to API
2. Choose any method
3. Click try it out
4. Click execute
5. Error:

Expected behavior

Response details should take all the column width space

Screenshots

Additional context or thoughts

I tweaked the CSS when live in Chrome and it worked.

[mykolasmolis]

Any updates regarding this issue?

[thierrydallacroce]

This seems to be a duplicate of #4574, for which I have an open PR. If approved and merged, this issue can most likely be closed.

[mykolasmolis]

I confirm this is being fixed now - thanks a lot!