handling distorted UI

SasanLabs · Jul 2, 2021 · ba1549d · ba1549d
1 parent cd97eff
commit ba1549d
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 10 deletions.
diff --git a/facade-app/package.json b/facade-app/package.json
@@ -24,7 +24,7 @@
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
-    "pretty": "prettier --write \"./**/*.{js,jsx,tsx}\""
+    "pretty": "prettier --write \"./**/*.{js,jsx,tsx,css}\""
   },
   "eslintConfig": {
     "extends": [

diff --git a/facade-app/src/Components/Content.tsx b/facade-app/src/Components/Content.tsx
@@ -84,8 +84,13 @@ export class Content extends React.Component<GlobalState> {
           <div>
             {activeVulnerability ? (
               <div>
-                <RSuitePanel header="Vulnerability Description" bodyFill>
-                  <div id="__vuln_description__" />
+                <RSuitePanel
+                  header="Vulnerability Description"
+                  className="VulnerableApp-Facade-Content-Vulnerability-Description-Header"
+                >
+                  <div className="VulnerableApp-Facade-Content">
+                    <div id="__vuln_description__" />
+                  </div>
                 </RSuitePanel>
               </div>
             ) : (
@@ -95,10 +100,11 @@ export class Content extends React.Component<GlobalState> {
               <div>
                 <RSuitePanel
                   header="Practice Vulnerability"
-                  bodyFill
-                  style={{ alignContent: "center" }}
+                  className="VulnerableApp-Facade-Content-Practice-Vulnerability-Header"
                 >
-                  <div id="__content__" />
+                  <div className="VulnerableApp-Facade-Content">
+                    <div id="__content__" />
+                  </div>
                 </RSuitePanel>
               </div>
             ) : (

diff --git a/facade-app/src/index.css b/facade-app/src/index.css
@@ -12,14 +12,20 @@ code {
     monospace;
 }
 
-.VulnerableApp-Facade-HomePage-Content, .VulnerableApp-Facade-AboutUs-Content {
+.VulnerableApp-Facade-HomePage-Content,
+.VulnerableApp-Facade-AboutUs-Content,
+.VulnerableApp-Facade-Content {
   font-size: 16px;
   font-weight: normal;
 }
 
-
-.VulnerableApp-Facade-AboutUs-Content-Header, .VulnerableApp-Facade-AboutUs-Content-Header .rs-panel-heading, .VulnerableApp-Facade-HomePage-Content-Header, .VulnerableApp-Facade-HomePage-Content-Header .rs-panel-heading {
+.VulnerableApp-Facade-AboutUs-Content-Header,
+.VulnerableApp-Facade-AboutUs-Content-Header .rs-panel-heading,
+.VulnerableApp-Facade-HomePage-Content-Header,
+.VulnerableApp-Facade-HomePage-Content-Header .rs-panel-heading,
+.VulnerableApp-Facade-Content-Vulnerability-Description-Header
+  .rs-panel-heading,
+.VulnerableApp-Facade-Content-Practice-Vulnerability-Header .rs-panel-heading {
   font-size: 24px;
   font-weight: bold;
 }
-