Merge pull request #8042 from Ishad-M-I-M/patch-1

Fix Images are not rendered properly in Firefox- Pre-built example pages
ballerina-platform · Oct 17, 2023 · dfd3b2e · dfd3b2e
2 parents 1fc0b0a + ee7bd5a
commit dfd3b2e
Show file tree

Hide file tree

Showing 11 changed files with 40 additions and 40 deletions.
diff --git a/pages/learn/integration/pre-built-integrations/ftp-edi-message-to-salesforce-opportunity.js b/pages/learn/integration/pre-built-integrations/ftp-edi-message-to-salesforce-opportunity.js
@@ -327,9 +327,9 @@ export default function Learn({ samples, content }) {
                     </p>
 
                   </Col>
-                  <Col xs={12} lg={6} className="text-center">
+                  <Col xs={12} lg={6} className="text-center mdContent">
 
-                    <img src={`${prefix}/images/pre-built/flow_diagrams/ftp-edi-message-to-salesforce-opportunity.png`} alt="Flow Diagram" style={{ width: "-webkit-fill-available" }} />
+                    <img src={`${prefix}/images/pre-built/flow_diagrams/ftp-edi-message-to-salesforce-opportunity.png`} alt="Flow Diagram" />
 
                   </Col>
                 </Row>
@@ -367,9 +367,9 @@ export default function Learn({ samples, content }) {
                   </Tab>
                   <Tab eventKey="diagram" title="Diagram">
 
-                    <Col xs={12} lg={6} className="text-center">
+                    <Col xs={12} lg={6} className="text-center mdContent">
 
-                      <img src={`${prefix}/images/pre-built/sequence-diagrams/ftp-edi-message-to-salesforce-opportunity.png`} alt="Sequence Diagram" style={{ width: "-webkit-fill-available" }} />
+                      <img src={`${prefix}/images/pre-built/sequence-diagrams/ftp-edi-message-to-salesforce-opportunity.png`} alt="Sequence Diagram" />
 
                     </Col>
 

diff --git a/pages/learn/integration/pre-built-integrations/github-to-email-integration.js b/pages/learn/integration/pre-built-integrations/github-to-email-integration.js
@@ -260,9 +260,9 @@ export default function Learn({ samples, content }) {
                     </p>
 
                   </Col>
-                  <Col xs={12} lg={6} className="text-center">
+                  <Col xs={12} lg={6} className="text-center mdContent">
 
-                    <img src={`${prefix}/images/pre-built/flow_diagrams/github-to-gmail-integration.png`} alt="Flow Diagram" style={{ width: "-webkit-fill-available" }} />
+                    <img src={`${prefix}/images/pre-built/flow_diagrams/github-to-gmail-integration.png`} alt="Flow Diagram" />
 
                   </Col>
                 </Row>
@@ -301,8 +301,8 @@ export default function Learn({ samples, content }) {
                   </Tab>
                   <Tab eventKey="diagram" title="Diagram">
 
-                    <Col xs={12} lg={6} className="text-center">
-                      <img src={`${prefix}/images/pre-built/sequence-diagrams/github-to-email-integration.png`} alt="Sequence Diagram" style={{ width: "-webkit-fill-available" }} />
+                    <Col xs={12} lg={6} className="text-center mdContent">
+                      <img src={`${prefix}/images/pre-built/sequence-diagrams/github-to-email-integration.png`} alt="Sequence Diagram" />
 
                     </Col>
 

diff --git a/pages/learn/integration/pre-built-integrations/gmail-to-salesforce-integration.js b/pages/learn/integration/pre-built-integrations/gmail-to-salesforce-integration.js
@@ -375,9 +375,9 @@ export default function Learn({ samples, content }) {
                     </p>
 
                   </Col>
-                  <Col xs={12} lg={6} className="text-center">
+                  <Col xs={12} lg={6} className="text-center mdContent">
 
-                    <img src={`${prefix}/images/pre-built/flow_diagrams/gmail-to-salesforce-integration.png`} alt="Flow Diagram" style={{ width: "-webkit-fill-available" }} />
+                    <img src={`${prefix}/images/pre-built/flow_diagrams/gmail-to-salesforce-integration.png`} alt="Flow Diagram" />
 
                   </Col>
                 </Row>
@@ -416,8 +416,8 @@ export default function Learn({ samples, content }) {
                   </Tab>
                   <Tab eventKey="diagram" title="Diagram">
 
-                    <Col xs={12} lg={6} className="text-center">
-                      <img src={`${prefix}/images/pre-built/sequence-diagrams/gmail-to-salesforce-integration.png`} alt="Sequence Diagram" style={{ width: "-webkit-fill-available" }} />
+                    <Col xs={12} lg={6} className="text-center mdContent">
+                      <img src={`${prefix}/images/pre-built/sequence-diagrams/gmail-to-salesforce-integration.png`} alt="Sequence Diagram" />
 
                     </Col>
 

diff --git a/pages/learn/integration/pre-built-integrations/google-drive-to-onedrive-integration.js b/pages/learn/integration/pre-built-integrations/google-drive-to-onedrive-integration.js
@@ -249,9 +249,9 @@ export default function Learn({ samples, content }) {
                     </p>
 
                   </Col>
-                  <Col xs={12} lg={6} className="text-center">
+                  <Col xs={12} lg={6} className="text-center mdContent">
 
-                    <img src={`${prefix}/images/pre-built/flow_diagrams/google-drive-to-onedrive-integration.png`} alt="Flow Diagram" style={{ width: "-webkit-fill-available" }} />
+                    <img src={`${prefix}/images/pre-built/flow_diagrams/google-drive-to-onedrive-integration.png`} alt="Flow Diagram" />
 
                   </Col>
                 </Row>
@@ -290,8 +290,8 @@ export default function Learn({ samples, content }) {
                   </Tab>
                   <Tab eventKey="diagram" title="Diagram">
 
-                    <Col xs={12} lg={6} className="text-center">
-                      <img src={`${prefix}/images/pre-built/sequence-diagrams/google-drive-to-onedrive-integration.png`} alt="Sequence Diagram" style={{ width: "-webkit-fill-available" }} />
+                    <Col xs={12} lg={6} className="text-center mdContent">
+                      <img src={`${prefix}/images/pre-built/sequence-diagrams/google-drive-to-onedrive-integration.png`} alt="Sequence Diagram" />
 
                     </Col>
 

diff --git a/pages/learn/integration/pre-built-integrations/google-sheets-to-salesforce-integration.js b/pages/learn/integration/pre-built-integrations/google-sheets-to-salesforce-integration.js
@@ -247,9 +247,9 @@ export default function Learn({ samples, content }) {
                     </p>
 
                   </Col>
-                  <Col xs={12} lg={6} className="text-center">
+                  <Col xs={12} lg={6} className="text-center mdContent">
 
-                    <img src={`${prefix}/images/pre-built/flow_diagrams/google-sheets-to-salesforce-integration.png`} alt="Flow Diagram" style={{ width: "-webkit-fill-available" }} />
+                    <img src={`${prefix}/images/pre-built/flow_diagrams/google-sheets-to-salesforce-integration.png`} alt="Flow Diagram" />
 
                   </Col>
                 </Row>
@@ -288,8 +288,8 @@ export default function Learn({ samples, content }) {
                   </Tab>
                   <Tab eventKey="diagram" title="Diagram">
 
-                    <Col xs={12} lg={6} className="text-center">
-                      <img src={`${prefix}/images/pre-built/sequence-diagrams/google-sheets-to-salesforce-integration.png`} alt="Sequence Diagram" style={{ width: "-webkit-fill-available" }} />
+                    <Col xs={12} lg={6} className="text-center mdContent">
+                      <img src={`${prefix}/images/pre-built/sequence-diagrams/google-sheets-to-salesforce-integration.png`} alt="Sequence Diagram" />
 
                     </Col>
 

diff --git a/...arn/integration/pre-built-integrations/hubspot-contacts-to-google-contacts-integration.js b/...arn/integration/pre-built-integrations/hubspot-contacts-to-google-contacts-integration.js
@@ -239,9 +239,9 @@ export default function Learn({ samples, content }) {
                     </p>
 
                   </Col>
-                  <Col xs={12} lg={6} className="text-center">
+                  <Col xs={12} lg={6} className="text-center mdContent">
 
-                    <img src={`${prefix}/images/pre-built/flow_diagrams/hubspot-contacts-to-google-contacts-integration.png`} alt="Flow Diagram" style={{ width: "-webkit-fill-available" }} />
+                    <img src={`${prefix}/images/pre-built/flow_diagrams/hubspot-contacts-to-google-contacts-integration.png`} alt="Flow Diagram" />
 
                   </Col>
                 </Row>
@@ -280,8 +280,8 @@ export default function Learn({ samples, content }) {
                   </Tab>
                   <Tab eventKey="diagram" title="Diagram">
 
-                    <Col xs={12} lg={6} className="text-center">
-                      <img src={`${prefix}/images/pre-built/sequence-diagrams/hubspot-contacts-to-google-contacts-integration.png`} alt="Sequence Diagram" style={{ width: "-webkit-fill-available" }} />
+                    <Col xs={12} lg={6} className="text-center mdContent">
+                      <img src={`${prefix}/images/pre-built/sequence-diagrams/hubspot-contacts-to-google-contacts-integration.png`} alt="Sequence Diagram" />
 
                     </Col>
 

diff --git a/pages/learn/integration/pre-built-integrations/kafka-to-salesforce-integration.js b/pages/learn/integration/pre-built-integrations/kafka-to-salesforce-integration.js
@@ -237,9 +237,9 @@ export default function Learn({ samples, content }) {
                       based on the prices published to a Kafka topic.</p>
 
                   </Col>
-                  <Col xs={12} lg={6} className="text-center">
+                  <Col xs={12} lg={6} className="text-center mdContent">
 
-                    <img src={`${prefix}/images/pre-built/flow_diagrams/kafka-to-salesforce-integration.png`} alt="Sequence Diagram" style={{ width: "-webkit-fill-available" }} />
+                    <img src={`${prefix}/images/pre-built/flow_diagrams/kafka-to-salesforce-integration.png`} alt="Sequence Diagram" />
 
                   </Col>
                 </Row>

diff --git a/pages/learn/integration/pre-built-integrations/mysql-to-salesforce-integration.js b/pages/learn/integration/pre-built-integrations/mysql-to-salesforce-integration.js
@@ -246,9 +246,9 @@ export default function Learn({ samples, content }) {
                     </p>
 
                   </Col>
-                  <Col xs={12} lg={6} className="text-center">
+                  <Col xs={12} lg={6} className="text-center mdContent">
 
-                    <img src={`${prefix}/images/pre-built/flow_diagrams/mysql-to-salesforce-integration.png`} alt="Flow Diagram" style={{ width: "-webkit-fill-available" }} />
+                    <img src={`${prefix}/images/pre-built/flow_diagrams/mysql-to-salesforce-integration.png`} alt="Flow Diagram" />
 
                   </Col>
                 </Row>
@@ -287,8 +287,8 @@ export default function Learn({ samples, content }) {
                   </Tab>
                   <Tab eventKey="diagram" title="Diagram">
 
-                    <Col xs={12} lg={6} className="text-center">
-                      <img src={`${prefix}/images/pre-built/sequence-diagrams/mysql-to-salesforce-integration.png`} alt="Sequence Diagram" style={{ width: "-webkit-fill-available" }} />
+                    <Col xs={12} lg={6} className="text-center mdContent">
+                      <img src={`${prefix}/images/pre-built/sequence-diagrams/mysql-to-salesforce-integration.png`} alt="Sequence Diagram" />
 
                     </Col>
 

diff --git a/pages/learn/integration/pre-built-integrations/news-api-to-email-integration.js b/pages/learn/integration/pre-built-integrations/news-api-to-email-integration.js
@@ -231,9 +231,9 @@ export default function Learn({ samples, content }) {
                     </p>
 
                   </Col>
-                  <Col xs={12} lg={6} className="text-center">
+                  <Col xs={12} lg={6} className="text-center mdContent">
 
-                    <img src={`${prefix}/images/pre-built/flow_diagrams/news-api-to-email-integration.png`} alt="Flow Diagram" style={{ width: "-webkit-fill-available" }} />
+                    <img src={`${prefix}/images/pre-built/flow_diagrams/news-api-to-email-integration.png`} alt="Flow Diagram" />
 
                   </Col>
                 </Row>
@@ -272,8 +272,8 @@ export default function Learn({ samples, content }) {
                   </Tab>
                   <Tab eventKey="diagram" title="Diagram">
 
-                    <Col xs={12} lg={6} className="text-center">
-                      <img src={`${prefix}/images/pre-built/sequence-diagrams/news-api-to-email-integration.png`} alt="Sequence Diagram" style={{ width: "-webkit-fill-available" }} />
+                    <Col xs={12} lg={6} className="text-center mdContent">
+                      <img src={`${prefix}/images/pre-built/sequence-diagrams/news-api-to-email-integration.png`} alt="Sequence Diagram" />
 
                     </Col>
 

diff --git a/pages/learn/integration/pre-built-integrations/salesforce-to-twilio-integration.js b/pages/learn/integration/pre-built-integrations/salesforce-to-twilio-integration.js
@@ -259,9 +259,9 @@ export default function Learn({ samples, content }) {
                     </p>
 
                   </Col>
-                  <Col xs={12} lg={6} className="text-center">
+                  <Col xs={12} lg={6} className="text-center mdContent">
 
-                    <img src={`${prefix}/images/pre-built/flow_diagrams/salesforce-to-twilio-integration.png`} alt="Flow Diagram" style={{ width: "-webkit-fill-available" }} />
+                    <img src={`${prefix}/images/pre-built/flow_diagrams/salesforce-to-twilio-integration.png`} alt="Flow Diagram" />
 
                   </Col>
                 </Row>

diff --git a/pages/learn/integration/pre-built-integrations/shopify-to-outlook-integration.js b/pages/learn/integration/pre-built-integrations/shopify-to-outlook-integration.js
@@ -259,9 +259,9 @@ export default function Learn({ samples, content }) {
                       welcome emails to new customers.</p>
 
                   </Col>
-                  <Col xs={12} lg={6} className="text-center">
+                  <Col xs={12} lg={6} className="text-center mdContent">
 
-                    <img src={`${prefix}/images/pre-built/flow_diagrams/shopify-to-outlook-integration.png`} alt="Flow Diagram" style={{ width: "-webkit-fill-available" }} />
+                    <img src={`${prefix}/images/pre-built/flow_diagrams/shopify-to-outlook-integration.png`} alt="Flow Diagram" />
 
                   </Col>
                 </Row>
@@ -300,8 +300,8 @@ export default function Learn({ samples, content }) {
                   </Tab>
                   <Tab eventKey="diagram" title="Diagram">
 
-                    <Col xs={12} lg={6} className="text-center">
-                      <img src={`${prefix}/images/pre-built/sequence-diagrams/shopify-to-outlook-integration.png`} alt="Sequence Diagram" style={{ width: "-webkit-fill-available" }} />
+                    <Col xs={12} lg={6} className="text-center mdContent">
+                      <img src={`${prefix}/images/pre-built/sequence-diagrams/shopify-to-outlook-integration.png`} alt="Sequence Diagram" />
 
                     </Col>