Merge pull request #39 from oracle-devrel/mobile-layout-fixes

updates to handle mobile layout better

Author: vmleon

app/src/components/content/answer.tsx

@@ -43,22 +43,22 @@ export const Answer = ({ item, sim }: Props) => {
       )}
       {!sim && (
         <li class="oj-flex demo-answer-layout">
-          <div class="oj-flex-item oj-flex-bar">
-            <div class="oj-sm-justify-content-flex-end oj-flex-bar-middle oj-sm-padding-2x demo-copy-paste oj-color-invert">
+          <div class="oj-flex-item">
+            <div class="oj-sm-justify-content-flex-end oj-sm-padding-2x-end oj-sm-12 demo-copy-paste oj-color-invert">
               <md-wrapper
                 id="TestingOne"
-                class="oj-sm-width-full"
+                class="oj-sm-12"
                 markdown={answer}
               />
             </div>
-            <div class="oj-flex-bar-end">
+            {/* <div class="oj-flex-bar-end">
               <oj-avatar
                 initials="A"
                 size="sm"
                 role="presentation"
                 background="orange"
               ></oj-avatar>
-            </div>
+            </div> */}
           </div>
         </li>
       )}

app/src/components/content/chat.tsx

@@ -70,7 +70,7 @@ export const Chat = ({ testId, data, questionChanged, question }: Props) => {
 
   return (
     <>
-      <div class="oj-flex-item">
+      <div class="oj-flex-item oj-sm-12">
         <oj-list-view
           id="chatlist"
           ref={listRef}

app/src/styles/app.css

@@ -34,6 +34,13 @@ header.oj-web-applayout-header {
 
 oj-sample-markdown-viewer .legacyStyling pre {
   color: black;
+  white-space:pre-wrap;
+  margin: unset;
+
+}
+oj-sample-markdown-viewer .legacyStyling p {
+  margin-right: 10px;
+
 }
 
 .copy-to-clip-btn {
@@ -52,6 +59,7 @@ oj-sample-markdown-viewer .legacyStyling pre {
   user-select: text;
 }
 
+
 .demo-bg-main {
   background-color: rgb(var(--oj-palette-neutral-rgb-10));
   box-shadow: var(--oj-core-box-shadow-md);
@@ -78,10 +86,14 @@ samp {
   margin: 20px 10px 50px 10px;
   border: 2px black;
   border-radius: 10px;
-  padding: 10px 10px 10px 65px;
+  padding: 10px;
   text-align: start;
   max-width: 1440px;
 }
+
+.demo-answer-padding {
+  margin-top:65px;
+}
 .demo-sim-answer-layout {
   min-height: 50px;
   display: inherit;
@@ -116,7 +128,7 @@ samp {
 .demo-chat-layout {
   max-height: 100%;
   height: 80%;
-  min-height: 400px;
+  min-height: calc(100vh - 200px);
 }
 
 .demo-no-data-layout {