<commit_before>import { EntityHeader, Flex, FlexProps, Separator, color } from "@artsy/palette"
import React, { FC } from "react"
import styled from "styled-components"
import { createFragmentContainer, graphql } from "react-relay"
import { Details_conversation } from "v2/__generated__/Details_conversation.graphql"
import { Media } from "v2/Utils/Responsive"

export const DETAIL_BOX_ANIMATION = `transition: width 0.3s ;`
const DETAIL_BOX_XS_ANIMATION = `transition: opacity 0.3s;`

const DetailsContainer = styled(Flex)<{ opacity?: 0 | 1 }>`
  border-left: 1px solid ${color("black10")};
  flex-shrink: 0;
  ${DETAIL_BOX_ANIMATION}
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  background-color: ${color("white100")};
`
// XS screen has opacity animation instead of width
const XSDetailsContainer = styled(DetailsContainer)`
  ${DETAIL_BOX_XS_ANIMATION}
  opacity: ${({ opacity }) => opacity};
`
interface DetailsProps extends FlexProps {
  conversation: Details_conversation
  showDetails: boolean
}

export const Details: FC<DetailsProps> = ({ conversation, ...props }) => {
  const content = (
    <>
      <EntityHeader
        px={2}
        py={1}
        name={conversation.to.name}
        initials={conversation.to.initials}
      />
      <Separator />
    </>
  )

  return (
    <>
      <Media greaterThan="xs">
        <DetailsContainer
          flexDirection="column"
          justifyContent="flex-start"
          flexShrink={0}
          height="100%"
          position={["absolute", "absolute", "absolute", "absolute", "static"]}
          right={[0, 0, 0, 0, "auto"]}
          width={props.showDetails ? "376px" : "0"}
          {...props}
        >
          {content}
        </DetailsContainer>
      </Media>
      <Media at="xs">
        <XSDetailsContainer
          flexDirection="column"
          justifyContent="flex-start"
          flexShrink={0}
          height="100%"
          position="absolute"
          right={0}
          top="114px" /* FIXME: why this is needed? */
          width="376px"
          opacity={props.showDetails ? 1 : 0}
          {...props}
        >
          {content}
        </XSDetailsContainer>
      </Media>
    </><commit_msg>Fix mobile main panel interaction<commit_after>import { EntityHeader, Flex, FlexProps, Separator, color } from "@artsy/palette"
import React, { FC } from "react"
import styled from "styled-components"
import { createFragmentContainer, graphql } from "react-relay"
import { Details_conversation } from "v2/__generated__/Details_conversation.graphql"
import { Media } from "v2/Utils/Responsive"

export const DETAIL_BOX_ANIMATION = `transition: width 0.3s ;`
const DETAIL_BOX_XS_ANIMATION = `transition: opacity 0.3s;`

const DetailsContainer = styled(Flex)<{ opacity?: 0 | 1 }>`
  border-left: 1px solid ${color("black10")};
  flex-shrink: 0;
  ${DETAIL_BOX_ANIMATION}
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  background-color: ${color("white100")};
`
// XS screen has opacity animation instead of width
const XSDetailsContainer = styled(DetailsContainer)`
  ${DETAIL_BOX_XS_ANIMATION}
  opacity: ${({ opacity }) => opacity};
`
interface DetailsProps extends FlexProps {
  conversation: Details_conversation
  showDetails: boolean
}

export const Details: FC<DetailsProps> = ({ conversation, ...props }) => {
  const content = (
    <>
      <EntityHeader
        px={2}
        py={1}
        name={conversation.to.name}
        initials={conversation.to.initials}
      />
      <Separator />
    </>
  )

  return (
    <>
      <Media greaterThan="xs">
        <DetailsContainer
          flexDirection="column"
          justifyContent="flex-start"
          flexShrink={0}
          height="100%"
          position={["absolute", "absolute", "absolute", "absolute", "static"]}
          right={[0, 0, 0, 0, "auto"]}
          width={props.showDetails ? "376px" : "0"}
          {...props}
        >
          {content}
        </DetailsContainer>
      </Media>
      <Media at="xs">
        <XSDetailsContainer
          flexDirection="column"
          justifyContent="flex-start"
          flexShrink={0}
          height="100%"
          position="absolute"
          right={0}
          top="114px" /* FIXME: why this is needed? */
          width="376px"
          opacity={props.showDetails ? 1 : 0}
          zIndex={props.showDetails ? 1 : -1}
          {...props}
        >
          {content}
        </XSDetailsContainer>
      </Media>
    </>
{'fraction_non_alphanumeric': 0.1393952867941307, 'fraction_numerical': 0.021787461093819474, 'mean_word_length': 2.645867098865478, 'pattern_counts': {'":': 0, '<': 35, '<?xml version=': 0, '>': 39, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3624021', 'n_tokens_mistral': 1448, 'n_tokens_neox': 1372, 'n_words': 299}