render Comment to Bar

[yarliganfatih]

can be use youtube comment structure

<div id="body" class="style-scope ytd-comment-renderer">
    <div id="author-thumbnail" class="style-scope ytd-comment-renderer">
        <a class="yt-simple-endpoint style-scope ytd-comment-renderer" href="/channel/{comment.authorChannelId.value}">
            <yt-img-shadow fit="" height="40" width="40" class="style-scope ytd-comment-renderer no-transition" style="background-color: transparent;" loaded="">
                <!--css-build:shady-->
                <img id="img" draggable="false" class="style-scope yt-img-shadow" alt="{comment.authorDisplayName}" height="40" width="40" src="{comment.authorProfileImageUrl}">
            </yt-img-shadow>
        </a>
    </div>
    <div id="main" class="style-scope ytd-comment-renderer">
        <div id="header" class="style-scope ytd-comment-renderer">
            <div id="pinned-comment-badge" class="style-scope ytd-comment-renderer" hidden=""></div>
            <div id="header-author" class="style-scope ytd-comment-renderer">
                <h3 class="style-scope ytd-comment-renderer">
                    <a id="author-text" class="yt-simple-endpoint style-scope ytd-comment-renderer"
                        href="/channel/{comment.authorChannelId.value}">
                        <span class=" style-scope ytd-comment-renderer">
                            {comment.authorDisplayName}
                        </span>
                    </a>
                </h3>
                <span id="author-comment-badge" class="style-scope ytd-comment-renderer" hidden=""></span>
                <yt-formatted-string class="published-time-text style-scope ytd-comment-renderer" link-inherit-color="" has-link-only_=""><a class="yt-simple-endpoint style-scope yt-formatted-string" spellcheck="false" href="" dir="auto">{renderPublishedTime(comment.publishedAt)}</a>
                </yt-formatted-string>
            </div>
        </div>
        <div id="comment-content" class="style-scope ytd-comment-renderer">

            <ytd-comment-inline-thumbnail-renderer id="inline-thumbnail-renderer"
                class="style-scope ytd-comment-renderer" hidden="">
                <!--css-build:shady-->
                <a class="yt-simple-endpoint style-scope ytd-comment-inline-thumbnail-renderer">
                    <div class="thumbnail-container style-scope ytd-comment-inline-thumbnail-renderer">
                        <yt-img-shadow object-fit="COVER" class="style-scope ytd-comment-inline-thumbnail-renderer" disable-upgrade=""></yt-img-shadow>
                    </div>
                </a>
            </ytd-comment-inline-thumbnail-renderer>

            <ytd-expander id="expander" max-number-of-lines="4" class="style-scope ytd-comment-renderer" collapsed="" should-use-number-of-lines="" style="--ytd-expander-max-lines:4;">
                <!--css-build:shady-->
                <div id="content" class="style-scope ytd-expander">
                    <yt-pdg-comment-chip-renderer id="paid-comment-chip" slot="content" class="style-scope ytd-comment-renderer" hidden="">
                        <!--css-build:shady-->
                        <div id="comment-chip-container" class="style-scope yt-pdg-comment-chip-renderer">
                            <yt-icon class="style-scope yt-pdg-comment-chip-renderer">
                                <!--css-build:shady-->
                            </yt-icon>
                            <span id="comment-chip-price" class="style-scope yt-pdg-comment-chip-renderer"></span>
                        </div>
                    </yt-pdg-comment-chip-renderer>
                    <yt-formatted-string id="content-text" slot="content" split-lines="" user-input="" class="style-scope ytd-comment-renderer">{comment.textDisplay}</yt-formatted-string>
                </div>

                <tp-yt-paper-button id="less" aria-expanded="true" noink="" class="style-scope ytd-expander" hidden="" style-target="host" role="button" tabindex="0" animated="" elevation="0" aria-disabled="false">
                    <!--css-build:shady-->
                    <span class="less-button style-scope ytd-comment-renderer" slot="less-button">Show Less</span>
                </tp-yt-paper-button>
                <tp-yt-paper-button id="more" aria-expanded="false" noink="" class="style-scope ytd-expander" hidden="" style-target="host" role="button" tabindex="0" animated="" elevation="0" aria-disabled="false">
                    <!--css-build:shady-->
                    <span class="more-button style-scope ytd-comment-renderer" slot="more-button">Read More</span>
                </tp-yt-paper-button>

            </ytd-expander>
        </div>
        <ytd-comment-action-buttons-renderer id="action-buttons" class="style-scope ytd-comment-renderer" system-icons="" action-buttons-style="desktop-toolbar">
            <!--css-build:shady-->
            <div id="toolbar" class="style-scope ytd-comment-action-buttons-renderer">
                <div id="reply-button" class="style-scope ytd-comment-action-buttons-renderer"></div>
                <span id="vote-count-left" class="style-scope ytd-comment-action-buttons-renderer" hidden="" aria-label="{comment.authorChannelId.value} like">
                    {comment.likeCount}
                </span>
                <ytd-toggle-button-renderer id="like-button" icon-size="16" class="style-scope ytd-comment-action-buttons-renderer style-text size-default" use-keyboard-focused="" system-icons="" is-icon-button="" has-no-text="" button-renderer="true">
                    <a class="yt-simple-endpoint style-scope ytd-toggle-button-renderer" tabindex="-1">
                        <yt-icon-button id="button" class="style-scope ytd-toggle-button-renderer style-text size-default">
                            <!--css-build:shady-->
                            <button id="button" class="style-scope yt-icon-button" aria-label="like this comment with other {comment.authorChannelId.value} user">
                                <yt-icon class="style-scope ytd-toggle-button-renderer">
                                    <svg viewBox="0 0 16 16" preserveAspectRatio="xMidYMid meet" focusable="false" class="style-scope yt-icon" style="pointer-events: none; display: block; width: 100%; height: 100%;">
                                        <g class="style-scope yt-icon">
                                            <path d="M12.42,14A1.54,1.54,0,0,0,14,12.87l1-4.24C15.12,7.76,15,7,14,7H10l1.48-3.54A1.17,1.17,0,0,0,10.24,2a1.49,1.49,0,0,0-1.08.46L5,7H1v7ZM9.89,3.14A.48.48,0,0,1,10.24,3a.29.29,0,0,1,.23.09S9,6.61,9,6.61L8.46,8H14c0,.08-1,4.65-1,4.65a.58.58,0,0,1-.58.35H6V7.39ZM2,8H5v5H2Z" class="style-scope yt-icon"></path>
                                        </g>
                                    </svg>
                                    <!--css-build:shady-->
                                </yt-icon>
                            </button>
                            <yt-interaction id="interaction" class="circular style-scope yt-icon-button">
                                <!--css-build:shady-->
                                <div class="stroke style-scope yt-interaction"></div>
                                <div class="fill style-scope yt-interaction"></div>
                            </yt-interaction>
                        </yt-icon-button>
                    </a>
                </ytd-toggle-button-renderer>
                <span id="vote-count-middle" class="style-scope ytd-comment-action-buttons-renderer" aria-label="{comment.authorChannelId.value} like">
                    {comment.authorChannelId.value}
                </span>
                <ytd-toggle-button-renderer id="dislike-button" icon-size="16" class="style-scope ytd-comment-action-buttons-renderer style-text size-default" use-keyboard-focused="" system-icons="" is-icon-button="" has-no-text="" button-renderer="true">
                    <a class="yt-simple-endpoint style-scope ytd-toggle-button-renderer" tabindex="-1">
                        <yt-icon-button id="button" class="style-scope ytd-toggle-button-renderer style-text size-default">
                            <!--css-build:shady-->
                            <button id="button" class="style-scope yt-icon-button" aria-label="Dislike this comment">
                                <yt-icon class="style-scope ytd-toggle-button-renderer">
                                    <svg viewBox="0 0 16 16" preserveAspectRatio="xMidYMid meet" focusable="false" class="style-scope yt-icon" style="pointer-events: none; display: block; width: 100%; height: 100%;">
                                        <g class="style-scope yt-icon">
                                            <path d="M3.54,2A1.55,1.55,0,0,0,2,3.13L1,7.37C.83,8.24,1,9,2,9H6L4.52,12.54A1.17,1.17,0,0,0,5.71,14a1.49,1.49,0,0,0,1.09-.46L11,9h4V2ZM6.07,12.86a.51.51,0,0,1-.36.14.28.28,0,0,1-.22-.09l0-.05L6.92,9.39,7.5,8H2a1.5,1.5,0,0,1,0-.41L3,3.35A.58.58,0,0,1,3.54,3H10V8.61ZM14,8H11l0-5h3Z" class="style-scope yt-icon"></path>
                                        </g>
                                    </svg>
                                    <!--css-build:shady-->
                                </yt-icon>
                            </button>
                            <yt-interaction id="interaction" class="circular style-scope yt-icon-button">
                                <!--css-build:shady-->
                                <div class="stroke style-scope yt-interaction"></div>
                                <div class="fill style-scope yt-interaction"></div>
                            </yt-interaction>
                        </yt-icon-button>
                    </a>
                </ytd-toggle-button-renderer>
                <div id="creator-heart" class="style-scope ytd-comment-action-buttons-renderer" hidden="">
                    <ytd-creator-heart-renderer />
                </div>
                <div id="share-button" class="style-scope ytd-comment-action-buttons-renderer" hidden="">
                </div>
                <div id="reply-button-end" class="style-scope ytd-comment-action-buttons-renderer" hidden="">
                </div>
            </div>
            <div id="reply-dialog" class="style-scope ytd-comment-action-buttons-renderer"></div>
        </ytd-comment-action-buttons-renderer>
    </div>
    <div id="action-menu" class="style-scope ytd-comment-renderer">
        <ytd-menu-renderer class="style-scope ytd-comment-renderer">
            <!--css-build:shady-->
            <div id="top-level-buttons-computed" class="top-level-buttons style-scope ytd-menu-renderer"></div>
            <div id="flexible-item-buttons" class="style-scope ytd-menu-renderer"></div>
            <yt-icon-button id="button" class="dropdown-trigger style-scope ytd-menu-renderer" style-target="button">
                <!--css-build:shady-->
                <button id="button" class="style-scope yt-icon-button" aria-label="Action Menu">
                    <yt-icon class="style-scope ytd-menu-renderer">
                        <svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" focusable="false" class="style-scope yt-icon" style="pointer-events: none; display: block; width: 100%; height: 100%;">
                            <g class="style-scope yt-icon">
                                <path d="M12,16.5c0.83,0,1.5,0.67,1.5,1.5s-0.67,1.5-1.5,1.5s-1.5-0.67-1.5-1.5S11.17,16.5,12,16.5z M10.5,12 c0,0.83,0.67,1.5,1.5,1.5s1.5-0.67,1.5-1.5s-0.67-1.5-1.5-1.5S10.5,11.17,10.5,12z M10.5,6c0,0.83,0.67,1.5,1.5,1.5 s1.5-0.67,1.5-1.5S12.83,4.5,12,4.5S10.5,5.17,10.5,6z" class="style-scope yt-icon"></path>
                            </g>
                        </svg>
                        <!--css-build:shady-->
                    </yt-icon>
                </button>
                <yt-interaction id="interaction" class="circular style-scope yt-icon-button">
                    <!--css-build:shady-->
                    <div class="stroke style-scope yt-interaction"></div>
                    <div class="fill style-scope yt-interaction"></div>
                </yt-interaction>
            </yt-icon-button>
            <yt-button-shape id="button-shape" version="modern" class="style-scope ytd-menu-renderer" disable-upgrade="" hidden=""></yt-button-shape>
        </ytd-menu-renderer>
    </div>
</div>

[yarliganfatih]

.style-scoped-watch-flexy{
  height: var(--ytd-watch-flexy-chat-max-height);
  min-height: 596px;
  margin-bottom: var(--ytd-margin-6x);
  border-radius: 12px;

  border: 1px solid var(--yt-spec-10-percent-layer);
  box-sizing: border-box;
  z-index: 601;
  position: relative;
  overflow: hidden;
  display: flexbox;
  display: flex;
  flex-direction: column;
}

.style-scope-live-chat-renderer{
  height: 48px;
  padding: 8px;
  box-sizing: border-box;
  font-size: var(--yt-live-chat-header-font-size,18px);
  background-color: var(--yt-live-chat-header-background-color,var(--yt-deprecated-opalescence-soft-grey-opacity-lighten-3));
  color: var(--yt-live-chat-header-text-color,var(--yt-live-chat-primary-text-color));
  display: flex;
  flex-direction: row;
  align-items: center;
  display: var(--yt-live-chat-header-renderer-display,flex);
}

.style-scope-live-chat-item-list-renderer{
  display: block;
  padding: 4px 24px;
  font-size: 12px;
  line-height: 16px;
  overflow: hidden;
  --yt-endpoint-color: #2196f3;
  --yt-endpoint-visited-color: #2196f3;
  --yt-endpoint-hover-color: var(--yt-live-chat-primary-text-color);
}

.style-scope-live-chat-item-list-renderer{
  position: relative;
  font-size: 13px;
  padding: 4px 24px;
  overflow: hidden;
  contain: content;
  --yt-endpoint-color: var( --yt-live-chat-primary-text-color, var(--yt-deprecated-luna-black) );
  --yt-endpoint-hover-color: var( --yt-live-chat-primary-text-color, var(--yt-endpoint-color) );
  display: flex;
  flex-direction: row;
  align-items: flex-start;

.yt-live-chat-app {
  display: block;
  width: 100vw;
  height: 100vh;
  min-width: 298px;
  min-height: 360px;
  --yt-report-form-modal-renderer-min-width: 0;
  z-index: 601;
  display: flex;
  flex-direction: column;
}

#contents.yt-live-chat-app {
  display: flex;
  flex-direction: column;
  flex: 1;
  flex-basis: 1e-9px;
}

#contents.yt-live-chat-app>*.yt-live-chat-app {
  flex: 1;
  flex-basis: 1e-9px;
  --scrollbar-width: 17px;
}

.yt-live-chat-renderer {
  position: relative;
  height: 100%;
  background: var(--yt-live-chat-background-color);
  color: var(--yt-live-chat-primary-text-color);
  overflow: hidden;
  z-index: 0;
  display: flex;
  flex-direction: column;
  contain: content;
}
}