Widen Perplexity.ai Content Universally by ehun32167

/* ==UserStyle==
@name           Widen Perplexity.ai Content on Search Pages
@namespace      github.com/openstyles/stylus
@version        1.1.0
@description    Widens the content area on Perplexity.ai search pages to full width
@author         Me
==/UserStyle== */

@-moz-document regexp("https://www\\.perplexity\\.ai/search/.*") {
    /* Remove side elements */
    div.-mx-md.-mt-md.min-h-0.flex-1.overflow-y-auto.px-md.pt-md.scrollbar-thin.scrollbar-track-transparent.scrollbar-thumb-idle.dark\:scrollbar-thumb-idleDark,
    .col-span-4 {
        display: none !important;
    }

    /* Target the main content container and ensure full width */
    .max-w-threadWidth,
    .max-w-\[75ch\],
    .max-w-3xl,
    .col-span-8,
    .prose,
    .markdown-query-wrapper,
    .default.font-display,
    .text-col {
        max-width: none !important;
        width: 100% !important;
    }

    /* Force full width layout */
    .grid,
    .grid-cols-12,
    .gap-md,
    .isolate.flex.h-auto.w-full.grow.flex-col {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
    }

    /* Adjust padding for readability */
    .px-md.md\:px-lg,
    .col-span-8,
    .prose,
    .markdown-query-wrapper {
        padding-left: 2rem !important;
        padding-right: 2rem !important;
    }

    /* Ensure main content area takes full width */
    .col-span-8 {
        grid-column: 1 / -1 !important;
        width: 100% !important;
    }

    /* Override any flex layouts that might be causing issues */
    .flex {
        width: 100% !important;
    }

    /* Target specific content wrappers */
    .markdown-query-wrapper,
    .prose.dark\:prose-invert.inline.leading-normal.break-words.min-w-0.\[word-break\:break-word\] {
        width: 100% !important;
        max-width: none !important;
    }

    /* Ensure container divs take full width */
    #__next > main > div > div > div.isolate.flex.h-auto.w-full.grow.flex-col,
    #__next > main > div > div > div.isolate.flex.h-auto.w-full.grow.flex-col > div,
    #__next > main > div > div > div.isolate.flex.h-auto.w-full.grow.flex-col > div > div,
    #__next > main > div > div > div.isolate.flex.h-auto.w-full.grow.flex-col > div > div > div {
        width: 100% !important;
        max-width: none !important;
    }
}