make it second gif more responsive

Signed-off-by: sk-pathan <[email protected]>
keploy · Apr 3, 2024 · 8954b78 · 8954b78
1 parent 76e44fb
commit 8954b78
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 4 deletions.
diff --git a/components/FeatureMoblieView.tsx b/components/FeatureMoblieView.tsx
@@ -16,7 +16,7 @@ import ClipboardJS from 'clipboard';
 const TextNotify=( {showCopy }: { showCopy: boolean })=>{
   return(
     <>
-      <p className='font-bold absolute bottom-14 mt-2 text-gradient-300'>Try Keploy Locally </p>
+      <p className='font-bold absolute bottom-14 mt-2 text-secondary-300'>Try Keploy Locally </p>
       <Transition
         show={showCopy}
         className='text-white bg-primary-300 text-sm  absolute z-50 bottom-14 px-2 text-center py-1 rounded font-semibold right-0 before:bg-primary-300 before:w-2 before:h-2 before:absolute before:-bottom-1 before:left-1/2 before:-translate-x-1/2 before:rotate-45'
@@ -39,7 +39,7 @@ export default function FeaturesMobileView() {
   const tabs = useRef<HTMLDivElement>(null);
   const codeRef = useRef<HTMLDivElement>(null);
   const copyButtonRef = useRef<HTMLButtonElement>(null);
-
+  const [height,setHeight]=useState(' ')
 
   const[showCopy,setCopy]=useState(false)
   useEffect(()=>{
@@ -49,8 +49,11 @@ export default function FeaturesMobileView() {
   },[showCopy])
 
   const heightFix = () => {
-    if (tabs.current && tabs.current.parentElement)
+    if (tabs.current && tabs.current.parentElement){
       tabs.current.parentElement.style.height = `${tabs.current.clientHeight + 20}px`;
+      let h=`${tabs.current.clientHeight-20}px`
+      setHeight(h)
+    }
   };
 
   useEffect(() => {
@@ -311,7 +314,8 @@ export default function FeaturesMobileView() {
                         autoplay
                         loop
                         src={deDuplication}
-                        style={{ height: "50vh", width: "90%" }}
+                        style={{ height: height }}
+                        className='md:w-11/12 w-[90vw] '
                         keepLastFrame={true}
                       >
                         <Controls

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -7,6 +7,9 @@ module.exports = {
     ],
     theme: {
         extend: {
+            width: {
+                '90vw': '90vw',
+            },
             colors: {
                 // Brand Palette
                 // Primary headings, primary buttons, main elements