Merge pull request #153 from StackOverflowIsBetterThanAnyAI/152-set-max-width-on-whole-page

set max width 2048px for whole page content, replace falsy headings, render main grid based on css

Author: StackOverflowIsBetterThanAnyAI

src/components/UI/navigation/Navigation.tsx

@@ -342,39 +342,41 @@ const Navigation = () => {
     return (
         <div className="sticky top-0 z-10" data-testid="navigation-container">
             <nav
-                className={`bg-zinc-925 text-slate-300 flex justify-between py-2 px-4 h-16
-            transition-opacity duration-500 ease-in-out ${navOpacity}`}
+                className={`bg-zinc-925 text-slate-300 py-2 px-4 h-16
+                transition-opacity duration-500 ease-in-out ${navOpacity}`}
                 data-testid="navigation"
             >
-                <HomeIcon />
-                {contextScreenWidth === 'TABLET' ||
-                contextScreenWidth === 'DESKTOP' ? (
-                    <DesktopSearch
-                        handleBlur={handleBlur}
-                        handleChange={handleChange}
-                        handleClick={handleClickCompletion}
-                        handleFocus={handleFocus}
-                        handleInput={handleInput}
-                        handleKeyDown={handleKeyDown}
-                        handleSearch={handleSearch}
-                        handleSearchDoubleClick={handleSearchDoubleClick}
-                        handleSearchKeyDown={handleSearchKeyDown}
-                        inputRef={inputRef}
-                        searchResultsExpanded={searchResultsExpanded}
-                        ref={desktopSearchRef}
-                    />
-                ) : (
-                    <ButtonIcon
-                        ariaLabel="Search current Livestreams."
-                        ariaPressed={ariaPressed}
-                        buttonIconRef={buttonIconRef}
-                        type="Search"
-                        title="Toggle search bar."
-                        onClick={handleToggleMobile}
-                        place="center"
-                    />
-                )}
-                <UserIcon anchorRef={anchorRef} buttonRef={userIconRef} />
+                <div className="max-w-[2048px] flex justify-between w-full m-auto">
+                    <HomeIcon />
+                    {contextScreenWidth === 'TABLET' ||
+                    contextScreenWidth === 'DESKTOP' ? (
+                        <DesktopSearch
+                            handleBlur={handleBlur}
+                            handleChange={handleChange}
+                            handleClick={handleClickCompletion}
+                            handleFocus={handleFocus}
+                            handleInput={handleInput}
+                            handleKeyDown={handleKeyDown}
+                            handleSearch={handleSearch}
+                            handleSearchDoubleClick={handleSearchDoubleClick}
+                            handleSearchKeyDown={handleSearchKeyDown}
+                            inputRef={inputRef}
+                            searchResultsExpanded={searchResultsExpanded}
+                            ref={desktopSearchRef}
+                        />
+                    ) : (
+                        <ButtonIcon
+                            ariaLabel="Search current Livestreams."
+                            ariaPressed={ariaPressed}
+                            buttonIconRef={buttonIconRef}
+                            type="Search"
+                            title="Toggle search bar."
+                            onClick={handleToggleMobile}
+                            place="center"
+                        />
+                    )}
+                    <UserIcon anchorRef={anchorRef} buttonRef={userIconRef} />
+                </div>
             </nav>
             {(contextScreenWidth === 'MOBILE' ||
                 contextScreenWidth === 'TABLET_SMALL') &&

src/components/skeleton/SkeletonFeed.tsx

@@ -1,20 +1,11 @@
-import { useContext } from 'react'
 import SkeletonChannelInfo from './SkeletonChannelInfo'
 import SkeletonProfilePicture from './SkeletonProfilePicture'
 import SkeletonThumbnail from './SkeletonThumbnail'
-import { ContextScreenWidth } from '../../App'
 
 const SkeletonFeed = () => {
-    const contextScreenWidth = useContext(ContextScreenWidth)
-    if (!contextScreenWidth) {
-        throw new Error(
-            'ContextScreenWidth must be used within a ContextScreenWidth.Provider'
-        )
-    }
-
     const skeletonArray = Array.from({ length: 20 }, (_, i) => i)
     return (
-        <>
+        <div className="max-w-[2048px] mx-auto">
             <div className="w-full lg:w-4/5 max-w-6xl m-auto pt-4">
                 <div
                     className="bg-zinc-50 rounded-full h-6 animate-pulse my-2"
@@ -28,15 +19,7 @@ const SkeletonFeed = () => {
                 className="bg-zinc-50 rounded-full h-5 animate-pulse my-4 mx-4"
                 style={{ width: 'min(85vw, 320px)' }}
             ></div>
-            <article
-                className={`p-4 gap-4 ${
-                    contextScreenWidth === 'MOBILE'
-                        ? 'grid grid-cols-1'
-                        : contextScreenWidth === 'TABLET_SMALL'
-                        ? 'grid grid-cols-2'
-                        : 'grid grid-cols-auto-fill-284'
-                }`}
-            >
+            <article className="p-4 gap-4 grid grid-cols-1 min-[384px]:grid-cols-2 sm:grid-cols-auto-fill-284">
                 {skeletonArray.map((item) => {
                     return (
                         <article key={item} className="max-w-[440px]">
@@ -51,7 +34,7 @@ const SkeletonFeed = () => {
                     )
                 })}
             </article>
-        </>
+        </div>
     )
 }
 

src/components/streamFeed/StreamFeed.tsx

@@ -20,7 +20,6 @@ import {
     ContextFocusInput,
     ContextLanguage,
     ContextSEOSearchText,
-    ContextScreenWidth,
     ContextSearchText,
     ContextStreamData,
 } from '../../App'
@@ -75,13 +74,6 @@ const StreamFeed = () => {
     const [filteredStreamData, setFilteredStreamData] =
         contextFilteredStreamData
 
-    const contextScreenWidth = useContext(ContextScreenWidth)
-    if (!contextScreenWidth) {
-        throw new Error(
-            'ContextScreenWidth must be used within a ContextScreenWidth.Provider'
-        )
-    }
-
     const contextSearchText = useContext(ContextSearchText)
     if (!contextSearchText) {
         throw new Error(
@@ -188,7 +180,7 @@ const StreamFeed = () => {
     }
 
     return (
-        <>
+        <div className="max-w-[2048px] mx-auto">
             {filteredStreamData && filteredStreamData.data.length > 0 ? (
                 <>
                     {!seoSearchText && (
@@ -247,13 +239,7 @@ const StreamFeed = () => {
                         </>
                     )}
                     <article
-                        className={`p-4 gap-4 ${
-                            contextScreenWidth === 'MOBILE'
-                                ? 'grid grid-cols-1'
-                                : contextScreenWidth === 'TABLET_SMALL'
-                                ? 'grid grid-cols-2'
-                                : 'grid grid-cols-auto-fill-284'
-                        }`}
+                        className="p-4 gap-4 grid grid-cols-1 min-[384px]:grid-cols-2 sm:grid-cols-auto-fill-284"
                         data-testid="streamfeed-container"
                     >
                         {filteredStreamData.data.map((item, index) => {
@@ -345,7 +331,7 @@ const StreamFeed = () => {
             ) : (
                 <StreamNoResults />
             )}
-        </>
+        </div>
     )
 }
 

src/components/streamFeed/StreamTitle.tsx

@@ -7,13 +7,13 @@ type StreamTitleProps = {
 
 const StreamTitle: FC<StreamTitleProps> = ({ testid, title }) => {
     return (
-        <h3
+        <div
             className="text-slate-300 w-full px-1 text-ellipsis whitespace-nowrap overflow-hidden text-base lg:text-lg streamfeed"
             title={title}
             data-testid={testid}
         >
             {title}
-        </h3>
+        </div>
     )
 }
 

src/components/streamFeed/StreamTitleHero.tsx

@@ -7,13 +7,13 @@ type StreamTitleHeroProps = {
 
 const StreamTitleHero: FC<StreamTitleHeroProps> = ({ testid, title }) => {
     return (
-        <h3
+        <div
             className="text-slate-300 w-full text-pretty text-base lg:text-lg streamfeed"
             title={title}
             data-testid={testid}
         >
             {title}
-        </h3>
+        </div>
     )
 }