Plays responsiveness (reactplay#772)

* finding errors

* fixing

* fixed

package.json

@@ -36,7 +36,7 @@
  "react-icons": "^4.3.1",
  "react-loader-spinner": "~5.1.5",
  "react-organizational-chart": "^2.1.1",
- "react-p5": "^1.3.30",
+ "react-p5": "^1.3.33",
  "react-qr-code": "^2.0.7",
  "react-redux": "^8.0.1",
  "react-router-dom": "^6.4.0",
@@ -68,13 +68,23 @@
  "cypress:run": "cypress run"
  },
  "eslintConfig": {
- "extends": ["react-app", "react-app/jest"]
+ "extends": [
+ "react-app",
+ "react-app/jest"
+ ]
  },
  "reactSnap": {
- "puppeteerArgs": ["--no-sandbox", "--disable-setuid-sandbox"]
+ "puppeteerArgs": [
+ "--no-sandbox",
+ "--disable-setuid-sandbox"
+ ]
  },
  "browserslist": {
- "production": [">0.2%", "not dead", "not op_mini all"],
+ "production": [
+ ">0.2%",
+ "not dead",
+ "not op_mini all"
+ ],
  "development": [
  "last 1 chrome version",
  "last 1 firefox version",

src/plays/download-fetch-response/DownloadFetchResponse.jsx

@@ -58,13 +58,13 @@ export default function DownloadFetchResponse(props) {
  justify="center"
  style={{ paddingTop: "10rem" }}
  >
- <Grid item xs={5}>
- <Card className={matches ? 'desk-screen' : 'other-screen'} sx={{ fontSize: 14 }}>
- <CardContent>
+ <Grid item xs={10} >
+ <Card className={matches ? 'desk-screen' : 'other-screen'} sx={{ fontSize: 14 }} className='main'>
+ <CardContent className="check">
  <Typography sx={{ fontSize: 14 }} gutterBottom>
  Save Fetch API Response
  </Typography>
- <Typography variant="h5" component="div">
+ <Typography variant="h5" component="div" >
  <div className="civ">
  {!fetching ? (
  <div className="clazz">

src/plays/download-fetch-response/response.scss

@@ -1,30 +1,29 @@
-.fetch-download
-{
- .note-txt
- {
- font-size: 11px !important;
- padding-top: 2rem;
- color: darkslategrey;
+.fetch-download {
+ .note-txt {
+ font-size: 11px !important;
+ padding-top: 2rem;
+ color: darkslategrey;
+ }
+ .desk-screen {
+ min-width: 650px;
+ }
+ .other-screen {
+ min-width: -webkit-fill-available;
+ }
+ .clazz {
+ input {
+ border: none;
+ overflow: auto;
+ outline: none;
+ -webkit-box-shadow: none;
+ -moz-box-shadow: none;
+ box-shadow: none;
+ resize: none;
+ width: 100%;
  }
- .desk-screen
- {
- min-width: 650px
- }
- .other-screen
- {
- min-width:-webkit-fill-available; ;
- }
-.clazz {
- input {
- border: none;
- overflow: auto;
- outline: none;
- -webkit-box-shadow: none;
- -moz-box-shadow: none;
- box-shadow: none;
- resize: none;
- width: -webkit-fill-available;
- ;
- }
- }
-}
+ }
+}
+
+.main {
+ width: 90vw;
+}

src/plays/multiselect-component/styles.scss

@@ -9,7 +9,9 @@ $select-component-dropdown-max-height: 450px;
 
 #multi-select-component {
  width: $select-component-width;
- margin-top: 100px;
+ margin-top: 100px; 
+ width: 100%;
+ height: max-content;
 
  > * {
  font-size: $select-component-font-size;
@@ -70,6 +72,7 @@ $select-component-dropdown-max-height: 450px;
  border-top-color: white;
  max-height: $select-component-dropdown-max-height;
  overflow-y: scroll;
+ width: 100%;
 
  &.closed {
  display: none;