> ## Documentation Index > Fetch the complete documentation index at: https://docs.sublay.io/llms.txt > Use this file to discover all available pages before exploring further. # Layout & Structure > Modify component layout and structure # Layout & Structure Rearrange, add, or remove UI elements directly in the source files. *** ## Adding Elements ### Add Custom Header ```tsx theme={null} // File: threaded-comment-section.tsx return (
{/* Custom header */}

Discussion ({totalComments} comments)

); ``` ### Add Custom Footer ```tsx theme={null} return (
{/* Custom footer */}
); ``` ### Add a Banner Between Form and Feed ```tsx theme={null} return (
{/* Custom banner */}
Be respectful. See our community guidelines.
); ``` *** ## Removing Elements ### Remove Vote Buttons ```tsx theme={null} // File: single-comment.tsx return (
{/* */}
); ``` ### Remove Reply Functionality ```tsx theme={null} return (
{/* */}
); ``` ### Remove Moderation Options Delete or comment out the action menu trigger in `single-comment.tsx`: ```tsx theme={null} {/* */} ``` *** ## Rearranging Elements ### Move Vote Buttons Above Comment Body ```tsx theme={null} // Before // After {/* Moved up */} ``` ### Move Sort Controls Move `` to the top of the section instead of inline with the feed. *** ## Modifying Spacing **Inline Styles:** ```tsx theme={null}
{/* Increased from 12px */} ``` **Tailwind:** ```tsx theme={null}
{/* p-4 → p-6 */} ``` *** ## GIF Picker Placement The GIF picker opens over the comment section and covers all of it: the comment list and the form. To make it cover the whole screen instead, pass `gifPickerFullScreen` to the section: ```tsx theme={null} ``` `SocialCommentSection` takes the same prop. The default is `false`. It works the same on React, React Native and Expo. ### React The picker fills the section's outer element, which is positioned (`relative`), so it is as tall as the section. Give the section a bounded height (it fills its parent and scrolls the comment list inside) to keep the picker's search field on screen in a long thread. If you compose your own layout from the feed and the form, wrap them in a positioned element, or the picker will cover the nearest positioned ancestor instead. The prop goes on the form: ```tsx theme={null}
``` ### React Native and Expo The picker fills the view it is rendered in, and the form renders it. In the section, the form is a direct child of the section's root view, so the picker covers the whole section. The section's border around the form is passed to the form as `containerStyle` (`containerClassName` in the Tailwind variant) rather than wrapped around it, because a wrapping view would become the area the picker covers. With `gifPickerFullScreen`, the picker opens in a React Native `Modal`: it covers the whole screen wherever the section sits in your app (inside a bottom sheet, for example), and Android's back button closes it. Its content is inset from the notch and the home indicator with React Native's `SafeAreaView`, which applies insets on iOS only. If your app uses `react-native-safe-area-context`, swap in its `SafeAreaView` in `giphy-container.tsx` to get insets on Android too. If you compose your own layout, render the form as a direct child of the view the picker should cover. The prop goes on the form: ```tsx theme={null} ``` *** ## Component Hierarchy Understanding the component tree helps you know which file to edit: **Threaded Comments:** ``` ThreadedCommentSection ← threaded-comment-section.tsx ├── NewCommentForm ← new-comment-form.tsx └── CommentsFeed ← comments-feed.tsx └── CommentThread ← comment-thread.tsx └── SingleComment ← single-comment.tsx ├── AuthorInfo ├── CommentBody ├── VoteButtons ← vote-buttons.tsx └── ReplyButton ``` **Social Comments:** ``` SocialCommentSection ← social-comment-section.tsx ├── SortByButton ← sort-by-button.tsx ├── NewCommentForm ← new-comment-form.tsx └── CommentsFeed ← comments-feed.tsx └── Comment ← comment.tsx ├── HeartButton ← heart-button.tsx └── Replies ← replies.tsx ``` *** ## Next Steps Add custom functionality Customize colors Advanced customization techniques Threaded comments file organization This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.