diff --git a/app/components/Article/article.css b/app/components/Article/article.css
index f7ad0e28..0f607750 100644
--- a/app/components/Article/article.css
+++ b/app/components/Article/article.css
@@ -1,10 +1,6 @@
article {
max-width: 47.43vw;
- margin: auto;
-}
-
-.article-wrapper {
- padding: var(--spacing-80);
+ margin: 0 auto;
}
article .meta {
diff --git a/app/components/CategoriesNav/Menu.tsx b/app/components/CategoriesNav/Menu.tsx
index dbad1b38..f068c186 100644
--- a/app/components/CategoriesNav/Menu.tsx
+++ b/app/components/CategoriesNav/Menu.tsx
@@ -18,23 +18,23 @@ interface CategoriesNavProps {
export const CategoriesNav = ({categories, activeCategoryId}: CategoriesNavProps) => {
const [search, onSearch] = useState('')
return (
-
+
Categories
-
+
+
+
{categories
.filter((tag) => tag.name.toLowerCase().includes(search.toLowerCase()))
.map(({tagId, name, questions}) => (
-
- {name} ({questions.length})
-
+ {name} ({questions.length})
))}
diff --git a/app/components/CategoriesNav/menu.module.css b/app/components/CategoriesNav/menu.module.css
index 01b3534c..12a49e68 100644
--- a/app/components/CategoriesNav/menu.module.css
+++ b/app/components/CategoriesNav/menu.module.css
@@ -1,32 +1,12 @@
-.categoryTitle {
- position: relative;
- text-align: left;
- display: inline-flex;
- align-items: center;
- padding: 8px 0;
- cursor: pointer;
-}
-
-.categoryAutoLayoutHorizontal {
- display: flex;
- flex-direction: column;
- justify-content: flex-start;
- /*gap: 8px;*/
- align-items: flex-start;
- margin: 5px;
- position: relative;
+.categoriesGroup {
+ padding: var(--spacing-12);
}
-.categoryAutoLayoutHorizontal.active {
- background-color: rgba(237.0000010728836, 250.00000029802322, 249.00000035762787, 1);
+.categoriesGroup > * {
+ padding: var(--spacing-16);
}
-.categoriesGroup {
+.categoryTitle {
+ padding: var(--spacing-24);
+ cursor: pointer;
+ display: inline-block;
width: 100%;
- position: relative;
- height: 100%;
- text-align: left;
- font-size: 16px;
- border-radius: 6px;
- border: 1px solid var(--colors-cool-grey-200);
- max-width: 328px;
- padding: 0 24px;
}
diff --git a/app/components/Nav/nav.css b/app/components/Nav/nav.css
index fa97fdb6..eae95f89 100644
--- a/app/components/Nav/nav.css
+++ b/app/components/Nav/nav.css
@@ -1,5 +1,5 @@
.top-header {
- padding: var(--spacing-32) var(--spacing-80);
+ padding: var(--spacing-32) 5.56vw;
}
.top-nav {
display: flex;
diff --git a/app/components/SearchInput/input.css b/app/components/SearchInput/input.css
index f06382db..f01c7a45 100644
--- a/app/components/SearchInput/input.css
+++ b/app/components/SearchInput/input.css
@@ -20,7 +20,6 @@
font-size: 16px;
color: var(--colors-cool-grey-600);
width: 100%;
- width: 256px;
transition: width 100ms;
}
diff --git a/app/components/Table/index.tsx b/app/components/Table/index.tsx
index ac26598d..1e521add 100644
--- a/app/components/Table/index.tsx
+++ b/app/components/Table/index.tsx
@@ -13,10 +13,11 @@ export type ListTableProps = {
* Browse by category
*/
elements: ListItem[]
+ className?: string
}
-export const ListTable = ({elements}: ListTableProps) => (
-
+export const ListTable = ({elements, className}: ListTableProps) => (
+
{elements.map(({pageid, title, subtitle, hasIcon}, i) => (
-
+
{section &&
}
-
-
+
tag.questions.length > 0).sort(sortFuncs[sortBy])}
activeCategoryId={selectedTag.tagId}
/>
{selectedTag === null ? null : (
-
-
{selectedTag.name}
- {selectedTag.questions.length === 0 ? (
-
No questions found
- ) : (
-
- {selectedTag.questions.length} pages tagged {`"${selectedTag.name}"`}
-
- )}
- {selectedTag &&
}
-
+
+ {selectedTag.name}
+
+ {selectedTag.questions.length === 0
+ ? 'No pages found'
+ : `${selectedTag.questions.length} pages tagged "${selectedTag.name}"`}
+
+ {selectedTag && }
+
)}