💄Fix mobile view on terms and conditions (#3187)

* 💄Fixing mobile view for terms and condition page

Affected Route: `/terms-and-conditions`

Screenshot:

* Fixing client logos for consulting pages

* Fixing the text alignment on mobile

* Updating Jira logo

components/blocks/clientLogos.tsx

@@ -6,7 +6,7 @@ const clientsData = layoutData.clients.clientsList;
 
 export const ClientLogos = () => {
   return (
-    <div className="flex flex-wrap justify-center">
+    <div className="flex flex-wrap justify-center gap-4">
       {clientsData.length &&
         clientsData.map((client) => (
           <Image
@@ -17,7 +17,7 @@ export const ClientLogos = () => {
             width={200}
             // commented out to test whether this is breaking images on the homepage see #2368
             //sizes="20vw"
-            className="my-4 max-w-full rounded-lg"
+            className="max-w-full rounded-lg"
           />
         ))}
     </div>

components/blocks/tableLayout.tsx

@@ -32,7 +32,7 @@ export const TableLayout = ({ data }: { data: TableLayoutProps }) => {
   return (
     <div
       className={classNames(
-        "not-prose descendant-th:border-1 descendant-th:border-gray-75 descendant-th:py-2 descendant-th:pl-2 descendant-td:border-y-1 descendant-td:py-1.5 descendant-td:pl-2",
+        "not-prose overflow-x-auto descendant-th:border-1 descendant-th:border-gray-75 descendant-th:py-2 descendant-th:pl-2 descendant-td:border-y-1 descendant-td:py-1.5 descendant-td:pl-2",
         tableStyles[data.tableStyle]
       )}
     >

components/technologyCard/technologyCard.tsx

@@ -9,12 +9,12 @@ const TechnologyCard: FC<TechnologyCardProps> = (props) => {
   const { name, readMoreSlug, thumbnail, body } = props;
   return (
     <article
-      className="mx-3.5 mb-15 mt-5 flex h-full flex-col border-b-2 border-solid border-sswRed bg-gray-75 px-16 py-11"
+      className="mx-3.5 mb-15 mt-5 flex h-full flex-col border-b-2 border-solid border-sswRed bg-gray-75 px-8 py-11"
       data-aos="flip-left"
     >
       {thumbnail ? (
         <figure
-          className="relative h-24"
+          className="relative h-24 px-8"
           data-tina-field={tinaField(props, "thumbnail")}
         >
           <Image
@@ -30,7 +30,7 @@ const TechnologyCard: FC<TechnologyCardProps> = (props) => {
 
       <div
         data-tina-field={tinaField(props, "body")}
-        className="prose max-w-full grow prose-p:text-justify prose-strong:text-sswRed prose-ul:grid prose-ul:grid-flow-col prose-ul:grid-rows-12 prose-ul:text-left descendant-div:!m-0"
+        className="prose max-w-full grow prose-strong:text-sswRed prose-ul:grid prose-ul:grid-flow-col prose-ul:grid-rows-12 prose-ul:text-left descendant-div:!m-0 md:prose-p:text-justify"
       >
         <TinaMarkdown content={body} />
       </div>

components/terms-and-conditions/agreementForm.tsx

@@ -7,7 +7,7 @@ export const AgreementForm = ({ data }) => {
   const sectionColorCss =
     sectionColors[data.backgroundColor] || sectionColors.default;
   return (
-    <div>
+    <>
       <div className={classnames("pagebreak my-10 p-8", sectionColorCss)}>
         {data.fields.map((field) => (
           <FormField
@@ -31,7 +31,7 @@ export const AgreementForm = ({ data }) => {
           Print and sign
         </button>
       </div>
-    </div>
+    </>
   );
 };
 
@@ -40,7 +40,7 @@ const FormField = ({ label, id, placeholder, resizeable }) => {
 
   return (
     <div className="relative inline-block w-full pb-3 md:flex">
-      <div className="w-96 py-2.5 pr-2 text-left font-bold sm:grow-0 md:text-right">
+      <div className="py-2.5 pr-2 text-left font-bold sm:grow-0 md:text-right">
         <label className="mb-1" htmlFor={id}>
           {label}
         </label>

content/technologies/jira.mdx

@@ -1,8 +1,8 @@
 ---
-name: jira
 title: Jira
-thumbnail: /images/thumbs/thumb-jira-banner.png
-readMoreSlug:
+name: jira
+readMoreSlug: null
+thumbnail: /images/thumbs/thumb-jira-banner-v2.png
 ---
 
 Jira is an issue and project tracking application developed by Atlassian. It promotes bug tracking and agile project management in software development. Jira has many useful features such as Scrum Boards, Kanban boards, and Agile reporting. It creates customizable workflows that map to any style of work.