Fix "read more" button on /companies

Didn't seem to work on mobile, and I think it's clean to use it on all
viewports.

Author: ivarnakken

app/routes/company/components/CompaniesPage.module.css

@@ -83,6 +83,10 @@
 .iconInfoPlacement {
   margin: var(--spacing-lg) 0;
   gap: var(--spacing-xl);
+
+  @media (--small-viewport) {
+    gap: var(--spacing-md);
+  }
 }
 
 .infoText {
@@ -91,16 +95,5 @@
 }
 
 .readMore {
-  display: none;
-  color: var(--lego-red-color);
-}
-
-@media (--small-viewport) {
-  .iconInfoPlacement {
-    gap: var(--spacing-md);
-  }
-
-  .readMore {
-    display: contents;
-  }
+  margin-left: calc(-1 * var(--spacing-md));
 }

app/routes/company/components/CompaniesPage.tsx

@@ -188,36 +188,39 @@ const CompaniesPage = () => {
             Vis mer
           </Button>
         )}
-        <div className={!expanded ? utilities.hiddenOnMobile : undefined}>
-          <p className={styles.infoText}>
-            Trykk deg inn på en bedrift for å se hva slags type bedrift det er,
-            les mer om hva de jobber med og se hvor de holder til. Bla deg
-            gjennom en oversikt over tidligere eller kommende arrangementer og
-            se hvem som har jobbannonser ute for øyeblikket. Hvis du vil lese
-            mer om bedriften så kan du navigere deg til nettsiden deres via
-            linken.
-          </p>
-
-          <p className={styles.infoText}>
-            Savner du en bedrift? Savner du noe informasjon om en bedrift? Ta
-            kontakt med Bedkom, vi tar gjerne imot innspill!
-          </p>
-          <Button
-            flat
-            className={styles.readMore}
-            onPress={() => setExpanded(false)}
-          >
-            Vis mindre
-          </Button>
-        </div>
+        {expanded && (
+          <div>
+            <p className={styles.infoText}>
+              Trykk deg inn på en bedrift for å se hva slags type bedrift det
+              er, les mer om hva de jobber med og se hvor de holder til. Bla deg
+              les mer om hva de jobber med og se hvor de holder til. Bla deg
+              gjennom en oversikt over tidligere eller kommende arrangementer og
+              se hvem som har jobbannonser ute for øyeblikket. Hvis du vil lese
+              mer om bedriften så kan du navigere deg til nettsiden deres via
+              linken.
+            </p>
+
+            <p className={styles.infoText}>
+              Savner du en bedrift? Savner du noe informasjon om en bedrift? Ta
+              kontakt med Bedkom, vi tar gjerne imot innspill!
+            </p>
+            <Button
+              flat
+              className={styles.readMore}
+              onPress={() => setExpanded(false)}
+            >
+              Vis mindre
+            </Button>
+          </div>
+        )}
       </div>
 
       <Flex wrap justifyContent="center" className={styles.iconInfoPlacement}>
-        <Flex gap="var(--spacing-sm)">
+        <Flex alignItems="center" gap="var(--spacing-sm)">
           <Icon name="briefcase" />
           <span>Aktive jobbannonser</span>
         </Flex>
-        <Flex gap="var(--spacing-sm)">
+        <Flex alignItems="center" gap="var(--spacing-sm)">
           <Icon name="calendar-clear" />
           <span>Kommende arrangementer</span>
         </Flex>