Polish flix page again, all we have to do is add endpoint redirects and posters!

src/components/layout/ThinContainer.tsx

@@ -21,7 +21,7 @@ export function ThinContainer(props: ThinContainerProps) {
 export function ThiccContainer(props: ThinContainerProps) {
   return (
     <div
-      className={`mx-auto w-[1250px] max-w-full px-8 sm:px-0 ${
+      className={`mx-auto w-[1000px] max-w-full sm:px-0 ${
         props.classNames || ""
       }`}
     >

src/pages/TopFlix.tsx

@@ -20,7 +20,7 @@ function Button(props: {
   return (
     <button
       className={classNames(
-        "font-bold rounded h-10 w-40 scale-95 hover:scale-100 transition-all duration-200",
+        "font-bold rounded h-10 w-40 scale-90 hover:scale-95 transition-all duration-200",
         props.className,
       )}
       type="button"
@@ -89,8 +89,8 @@ async function getTotalViews() {
   const response = await fetch("https://backend.sudo-flix.lol/metrics");
   const text = await response.text();
 
-  // Regex to match the view counts of all shows/movies with success="true"
-  const regex = /mw_media_watch_count{[^}]*,success="true"} (\d+)/g;
+  // Add up all mw_media_watch_count entries
+  const regex = /mw_media_watch_count{[^}]*} (\d+)/g;
   let totalViews = 0;
   let match = regex.exec(text);
 
@@ -158,21 +158,21 @@ export function TopFlix() {
 
   return (
     <SubPageLayout>
-      <ThiccContainer classNames="px-4">
+      <ThiccContainer>
+        <div className="mt-8 w-full px-8">
           <Heading1>Top flix</Heading1>
           <Paragraph className="mb-18">
             The most popular movies on sudo-flix.lol, this data is fetched from
             the current backend deployment.
           </Paragraph>
           <div className="mt-8 w-auto">
-          <div className="bg-buttons-secondary rounded-xl py-5 px-7 inline-block">
+            <div className="bg-buttons-secondary rounded-xl scale-95 py-3 px-5 mb-2 inline-block">
               <p className="font-bold bg-opacity-90 text-buttons-secondaryText">
                 Overall Views: {totalViews}
               </p>
             </div>
           </div>
 
-        <div className="mt-8 w-full max-w-none">
           <Divider marginClass="my-3" />
           {getItemsForCurrentPage().map((item) => {
             const coverUrl = getMediaPoster(item.tmdbFullId);
@@ -183,9 +183,10 @@ export function TopFlix() {
               </ConfigValue>
             );
           })}
+        </div>
         <div
           style={{ display: "flex", justifyContent: "space-between" }}
-            className="mt-6"
+          className="mt-5 w-full px-8"
         >
           <Button
             className="py-px box-content bg-buttons-secondary hover:bg-buttons-secondaryHover bg-opacity-90 text-buttons-secondaryText justify-center items-center"
@@ -194,7 +195,7 @@ export function TopFlix() {
           >
             Previous page
           </Button>
-            <div>
+          <div style={{ display: "flex", alignItems: "center" }}>
             {currentPage} / {maxPageCount}
           </div>
           <Button
@@ -205,7 +206,6 @@ export function TopFlix() {
             Next page
           </Button>
         </div>
-        </div>
       </ThiccContainer>
     </SubPageLayout>
   );