The swap button does not fit the view

[paintoshi]

Bug Description
After pressing "review swap", the swap button is too tall for the view.

A workaround based on #584 (comment)

Wrap your uniswap widget with <div class="uniswap"> and add next CSS:

.uniswap [color='container'] > div > div:nth-child(3) {
  position: relative;
}

.uniswap [data-testid='swap-button'] {
  margin-bottom: 16px;
}

The first part "position relative" fixes a selection hover bug. The "16px" makes the button fit by making it smaller, as seen here.

Or wrap the CSS in a styled div:

import styled from 'styled-components'
const WidgetContainer = styled.div`
  [color='container'] > div > div:nth-child(3) {
    position: relative;
  }

  [data-testid='swap-button'] {
    margin-bottom: 16px;
  }
`

[myInstagramAlternative]

Same here...

Btw. theme colors (container, module, dialog) are not consistent across windows/elements and pracically useless if you want to put opacity.

Example:
const theme = {
primary: "#311b49",
secondary: "#311b49",
interactive: "#65de56",
container: "rgba(0,180,254, 0.4)",
module: "rgba(0,255,254, 0.5)",
accent: "#fff",
outline: "#65de56",
dialog: "rgba(255,255,255, 0.8)",
};