Merge pull request #4 from oracle-devrel/responsive-layout-fix

fixing responsive layout issue and header banner

Author: WSPluta

app/src/components/content/chat.tsx

@@ -76,7 +76,7 @@ const Chat = ({ testId, data }: Props) => {
         data={dataProvider.current}
         selectionMode="none"
         scrollPosition={scrollPos}
-        class="oj-oj-sm-width-full demo-chat-layout"
+        class="oj-sm-width-full demo-chat-layout"
       >
         <template slot="itemTemplate" render={chatItemTemplate}></template>
         <template slot="noData" render={chatNoDataTemplate}></template>

app/src/components/content/index.tsx

@@ -141,17 +141,17 @@ const Content = () => {
 
   return (
     <div class="oj-web-applayout-max-width oj-web-applayout-content oj-flex oj-sm-flex-direction-column demo-bg-main">
-      {/* <div class="oj-flex-bar oj-flex-item demo-header">
+      <div class="oj-flex-bar oj-flex-item demo-header oj-sm-12">
         <oj-c-message-toast
           data={messagesDP.current}
           position="top"
           onojClose={handleToastClose}
         ></oj-c-message-toast>
         <h1 class="oj-typography-heading-lg oj-flex-bar-start"> </h1>
         <div class="oj-flex-bar-end oj-color-invert demo-header-end">
-          <h6 class="oj-sm-margin-2x-end">{connState}</h6>
+          {/* <h6 class="oj-sm-margin-2x-end">{connState}</h6> */}
         </div>
-      </div> */}
+      </div>
       <div class="oj-flex-item">
         <Chat data={update} />
       </div>

app/src/styles/app.css

@@ -94,12 +94,14 @@ samp {
 }
 
 .demo-header {
-  background-color: rgb(var(--oj-palette-neutral-rgb-10));
-  max-height: 5px;
+  background-color: var(
+    --oj-sp-header-welcome-banner-background-color
+  ) !important;
+  max-height: 150px;
 }
 .demo-header-end {
-  /* background-image: url(images/welcomeBanner-foreground2.png); */
-  max-height: 5px;
+  background-image: url(images/welcomeBanner-foreground2.png);
+  width: 600px;
   justify-content: end;
 }