Update layout styles for improved responsiveness and consistency

Author: Carlos

src/components/layout/TheToc.vue

@@ -23,7 +23,7 @@ const pageToc = computed(() => {
 <template>
   <nav
     aria-labelledby="on-this-page-title"
-    class="flex h-full w-56 flex-col justify-between"
+    class="flex h-full w-72 flex-col justify-between"
   >
     <div>
       <h3

src/layouts/article.vue

@@ -12,7 +12,7 @@ const reader = useReaderStore()
     >
       <!-- article -->
       <div
-        class="min-w-0 flex-auto px-4 py-12 lg:pl-8 lg:pr-0 xl:px-16"
+        class="min-w-0 flex-auto px-4 py-12 xl:pr-16"
         :class="[reader.isActive ? 'max-w-2xl lg:max-w-4xl' : 'lg:max-w-4xl']"
       >
         <article>
@@ -29,7 +29,7 @@ const reader = useReaderStore()
       <!-- table of content -->
       <div
         v-show="!reader.isActive"
-        class="hidden w-56 overflow-x-hidden xl:sticky xl:top-[4.3rem] xl:-mr-6 xl:block xl:h-[calc(100vh-3.6rem)] xl:flex-none xl:overflow-y-auto xl:py-10 xl:pr-6"
+        class="hidden w-64 overflow-x-hidden xl:sticky xl:top-[4.3rem] xl:-mr-6 xl:block xl:h-[calc(100vh-3.6rem)] xl:flex-none xl:overflow-y-auto xl:py-10 xl:pr-6"
       >
         <the-toc />
       </div>