fix bugs

src/components/header/header.module.css

@@ -3,11 +3,14 @@
   position: relative;
   background-color: var(--background-primary);
   font-size: 12px;
+  /* Add flex display */
+  display: flex;
+  flex-direction: column;
 }
 
 .container {
   display: flex;
-  align-items: flex-end;
+  align-items: flex-end; /* This aligns children to bottom */
   justify-content: flex-start;
   white-space: nowrap;
 }
@@ -98,15 +101,17 @@
 .tabMenu {
   list-style-type: none;
   white-space: nowrap;
-  display: inline-block;
-  vertical-align: bottom;
+  display: flex;
+  align-items: flex-end;
   text-transform: lowercase;
 }
 
 .tabMenu li {
-  display: inline;
+  display: inline-flex;
+  align-items: flex-end;
   font-weight: bold;
   margin: 0px 3px;
+  line-height: 1.3;
 }
 
 .tabMenu li a {
@@ -114,6 +119,7 @@
   background-color: var(--background-secondary);
   text-decoration: none;
   color: var(--text-primary);
+  box-sizing: border-box;
 }
 
 .tabMenu .selected a {
@@ -121,17 +127,20 @@
   background-color: var(--background);
   border: 1px solid var(--border-primary);
   border-bottom: 1px solid var(--background);
+  padding: 2px 6px 0 6px;
+  display: inline-flex;
+  align-items: flex-end;
+  margin-bottom: -1px;
 }
 
-.tabs {
+.horizontalScroll {
   display: flex;
   overflow-x: auto;
   scrollbar-width: none;
   -ms-overflow-style: none;
-  padding-top: 5px;
 }
 
-.tabs::-webkit-scrollbar {
+.horizontalScroll::-webkit-scrollbar {
   display: none;
 }
 
@@ -166,4 +175,4 @@
 
 .lowercase {
   text-transform: lowercase;
-}
+}

src/components/header/header.tsx

@@ -419,7 +419,7 @@ const Header = () => {
         )}
       </div>
       {isMobile && !isInSubplebbitSubmitView && (
-        <ul className={`${styles.tabMenu} ${styles.tabs}`}>
+        <ul className={`${styles.tabMenu} ${isInProfileView ? styles.horizontalScroll : ''}`}>
           <HeaderTabs />
           {(isInHomeView || isInAboutView || isInHomeSidebarView) && <AboutButton />}
           {(isInHomeView || isInAllView || isInSidebarView || isInSubplebbitView || isInPostView || isInAboutView) && <SidebarButton />}

src/views/about/about.module.css

@@ -1,5 +1,5 @@
 .content {
-  padding: 7px 5px 0px 5px;
+  padding: 7px 5px 30px 5px;
 }
 
 .about {

src/views/about/about.tsx

@@ -118,8 +118,9 @@ const About = () => {
         <h3 id='registerUsername'>Can I register a username?</h3>
         <p>
           You can set a display name for your account in the <Link to='/settings#displayName'>preferences</Link>. Your account address (u/{account?.author?.shortAddress})
-          is generated randomly from a cryptographic hash of your public key, similarly to how a bitcoin address is generated. You can change your account address to a
-          readable name unique to you, by resolving it with a decentralized domain name service such as{' '}
+          is generated randomly from a cryptographic hash of your public key, similarly to how a bitcoin address is generated. You can{' '}
+          <HashLink to='/settings#cryptoAddress'>change your account address</HashLink> to a unique readable name you own, by resolving it with a decentralized domain
+          name service such as{' '}
           <a href='https://sns.id' target='_blank' rel='noopener noreferrer'>
             ENS
           </a>{' '}

src/views/profile/profile.tsx

@@ -240,6 +240,7 @@ const Profile = () => {
   const { t } = useTranslation();
   const account = useAccount();
   const isMobile = useWindowWidth() < 640;
+  const [showInfobar, setShowInfobar] = useState(false);
 
   const profileTitle = account?.author?.displayName ? `${account?.author?.displayName} (u/${account?.author?.shortAddress})` : `u/${account?.author?.shortAddress}`;
   useEffect(() => {
@@ -247,18 +248,17 @@ const Profile = () => {
   }, [t, profileTitle]);
 
   // only show infobar on first profile access and if the current account wasn't imported
-  const showInfobarRef = useRef(false);
   useEffect(() => {
     const wasProfileAccessed = localStorage.getItem('wasProfileAccessed');
     const importedAccountAddress = localStorage.getItem('importedAccountAddress');
 
     if (!wasProfileAccessed && importedAccountAddress !== account?.author?.address) {
-      showInfobarRef.current = true;
+      setShowInfobar(true);
       localStorage.setItem('wasProfileAccessed', 'true');
     }
   }, [account?.author?.address]);
 
-  const infobar = showInfobarRef.current && (
+  const infobar = showInfobar && (
     <div className={styles.infobar}>
       <Trans
         i18nKey='profile_info'

src/views/settings/settings.tsx

@@ -204,7 +204,7 @@ const GeneralSettings = () => {
           <DisplayNameSetting />
         </span>
       </div>
-      <div className={styles.category}>
+      <div className={`${styles.category} ${location.hash === '#cryptoAddress' ? styles.highlightedSetting : ''}`} id='cryptoAddress'>
         <span className={styles.categoryTitle}>{t('crypto_address')}</span>
         <span className={styles.categorySettings}>
           <AddressSettings />

src/views/subplebbit/subplebbit.tsx

@@ -61,14 +61,14 @@ const Subplebbit = () => {
     let footerFirstLine;
     let footerSecondLine;
 
-    if (feed.length === 0 && isOnline) {
+    if (feed.length === 0 && isOnline && started && !isSubCreatedButNotYetPublished) {
       if (blocked) {
         footerFirstLine = t('you_blocked_community');
       } else {
         footerFirstLine = t('no_posts');
       }
-    } else if (feed.length === 0 && started && isSubCreatedButNotYetPublished) {
-      footerFirstLine = t('no_posts');
+    } else if (feed.length === 0 || !isOnline) {
+      footerFirstLine = loadingString;
     } else if (hasMore) {
       footerFirstLine = loadingString;
     }